Mouseover Buttons

Using buttons with the on mouseover effect, or sometimes called the rollover effect, can help your visitors find their way around your site, and make it stand out.

Below are a few example buttons, plus, you will find examples you can download just to get you started.

Go to CSS Rollover Buttons if you would like an easier way of creating MouseOver Buttons.

Becomes
Becomes
mouseover up mouseover down Becomes
Becomes
Becomes
mouseover up mouseover up Becomes
mouseover up mouseover up Becomes

Download Create_mouseover_buttons.pdf which contains instructions containing the code for the above examples.

Help creating MouseOver

The code below shows how to create your mouseover effects.

Some things that you will have to change in the code below are:-
The paths to your images.
The width and height of your images, both images must be the same size

Please take note of the code which is in red, you must increment this value for each button you add to your menu, I started with '00' the next button is '20', doing it this way allows you to insert a new button without having to redo the code again.


<script language="JavaScript">SecondImage00='mover/goldover.gif';</script> <a href="http://www.yourlink.com/" onMouseOver="{OrigImage00=img00.src; img00.src=SecondImage00} " onMouseOut="img00.src=OrigImage00"> <img alt="" name="img00" border="0" src="mover/goldon.gif" width="122" height="32" onLoad="TempImage00=new Image(0,0); TempImage00.src=SecondImage00"></a>

<script language="JavaScript">SecondImage20='mover/goldover1.gif';</script> <a href="http://www.yourlink.com" onMouseOver="{OrigImage20=img20.src; img20.src=SecondImage20} " onMouseOut="img20.src=OrigImage20"> <img alt="" name="img20" border="0" src="mover/goldon1.gif" width="122" height="32" onLoad="TempImage20=new Image(0,0); TempImage20.src=SecondImage20"></a>

 

For a more advanced version you can Download Example with Instructions to create your first Mouse Over Buttons



Create an Interface






Create a Interface bar like the one on the left using Mouse Over Buttons.
Transparency Optimized .gif's to work on any Background Colour

Download Working Example of a ready made page including the buttons. All you have to do is add your own text to the buttons ( See bottom of page for a link to a Free Util ) using any graphics editor. The other thing you have to do is to put your own page links in. That easy.

Some smaller buttons


DHTML

You can also use DHTML to get a MouseOver effect in a table as set out below. Change Border Colours and Background Colours to suit yourself. Works in Explorer and Netscape
Download  a text file that you can save to show you exactly how it is done.

Menu Bar Gradient Fill

Framed Pages

I have been asked several times how to use the above in a framed page and still use the mouseover effect. Here you are, Download this a working example using the code. Please unzip into a new folder, just to make sure you don't ovewrite any of your own files.

 


If you use any of these free mousover buttons, then please save and upload them to your own server. Thankyou.