Mouse Over Buttons

 

Using buttons with the on mouseover effect, or sometimes called the roll-over 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.

 

If you use Internet Explorer, then, right click on any button and select " Save picture as".

If you use Netscape, then, right click on any button and select " Save image as".

 

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

 

Mainly for a light background

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

 

 

 

 

 

Help 1

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

 

Some More

 

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.

Build a Simple Nav Bar

Top Top
Main button Main
Over Button Over
Bottom Bottom

 

 

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

 

 

Enter my Freebits Competition and you could win a full version copy of Flash Menu Builder, or a choice from 23 other titles.

 

Go to my CoffeeCup Page to see a list of all the available titles and offers.

 

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.

 

Home