Logo

Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Orb Button Effect - DW Script: Part II

 


img

This set of tutorials will show you how to create a very basic mouse over effect in html/css, and define link properties for different parts of the web page. Therefore this tutorial will spilt into 3 parts:

Orb Button Effect - Photoshop Part I : will show how the button is made.
Orb Button Effect - DW Script Part II: will show on how to make a simple basic mouse over effect with html/css.
Orb Button and Colored Links - DW Sript Part III: will show you how to create div's to use animation and then set specific link colors throughout the pages.

**note** This page is intended as a quick-look at the code that you will be using for the next tutorial.

Now with the html/css part. In this tutorial I will be using the Macromedia Dreameaver 8.

  1. Create a new html document. You will have all the default codes in this new document. Leave it as it is because all of these codes are essential, not here but other html/css codes which you might be using in the future.
  2. In the <body> tag, put in this codes

<a href=”#”></a>

This is to make a hyperlink on the page itself. The # will be the hyperlink’s target, but you should go ahead and put in a URL in the form of: http://www.co-bw.com

  1. While in the <head> part, below the <title>, put in the below codes

 

<style type="text/css">
div.header {
background-color: #ffffff
}
.header a, visited {
width: 100px;
height: 100px;
background: #ffffff url(Images_PS_4/Orb_hover.png) no-repeat;
display: block;
}
.header a:hover {
width: 100px;
height: 100px;
background: #ffffff url(Images_PS_4/Orb_over.png) no-repeat;
}
</style>

The 2 images used are:

img hover

Above: Orb_hover.png

img over

Above: Orb_over.png

The a,visited is to set how the button looks like in the default and after click state. Find out the width and height of the button images where you’d saved during the Orb Button Effect - Photoshop Part, then put in the numbers accordingly.

  1. As for the background, the #fffffff is set to show white color in case the image hasn’t load yet. URL is obviously where your image was saved. Choose the mouse-active.jpg. The no-repeat is set to disallow the image from repeating.
    display: block is to make sure the button active area is covered along the whole width and height that you’d put in above.

    a:hover is how your button will looks like when the mouse is on top of the button. Here we will only need the background attribute as it will follow the a,visited attribute. Choose the image of mouse-over.jpg.

  2. Now save the work as .htm and view it, you will have the mouse over effect to be working!

Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact

Top

Creative Commons License