This set of tutorial will show on how to create a very basic mouse over effect in html/css. Therefore this tutorial will spilt into 2 parts:
- Orb Button Effect - Photoshop Part : which will show how the button is made
- Orb Button Effect - Dreamweaver Part : which will show on how to make a simple basic mouse over effect with html/css
**note** this is a very basic tutorial
Now with the html/css part. In this tutorial I will be using the Macromedia Dreameaver 8.
- 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.
- 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. - While in the <head> part, below the <title>, put in the below codes
<style> a,visited { width: 101px; height: 144px; background: #ffffff url(mouse-active.jpg) no-repeat; display: block; } a:hover { background: #ffffff url(mouse-over.jpg) no-repeat; } </style>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.
As for the background, the #ffffff 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.
- Now save the work as .html and view it, you will have the mouse over effect to be working!
To view the example, Click Here. Together with an example done by doing small changes on the image in Orb Button Effect - Photoshop Part
discuss this topic to forum
