Rollovers (Image Swaps)

*** make sure to read the "Rollover Problem" page, for a common rollover coding problem, and the fix.

This has been a long, difficult search for the perfect rollover script.  A rollover is a web image that changes when you move the mouse over it, changes again when you click on it, changes again when you release the mouse button, and changes yet again when you move the mouse away from the image.

I have tried more than 20 scripts, most failed miserably.  I kept the few working ones and supply them here for your use.  The links to the four rollovers and included scripts are listed at the bottom of this page.  I have reviewed each type and listed the shortcomings and strong points.

Downloads

Click on the following links to view and download some quality rollover buttons that I created.  You can also view the code and try them yourself, and edit the images to adjust the color, or to add text to the buttons.

Arrows  -  Rounds  -  Custom  -  Radical

 

Rollovers 101 - Requirements for the perfect Rollover

 

3 image,  and 4 image,  4-State Rollovers

 

Rollovers were originally simple image swaps, that occurred when you moved the mouse over the image.  Later they were enhanced to include image swaps when you click on the image and when you release the mouse button (unclick).  This gives a web page 4 possible "states" for a rollover:

I had to look far and wide for "true" 4-state rollovers, but have found a few of them.  There is certainly a need for 4-state rollovers, BUT NOT for 4-image rollovers.  The MouseOver state should typically show the same image as the MouseUp state.  In general - only use 3-images, and copy the MouseOver image to the MouseUp image if your code requires 4 images.  It makes sense, as follows :

bullet

MouseOver  -  the mouse is hovering over the image and is not clicked - same state as MouseUp

bullet

MouseUp - the mouse is hovering over the image and is not clicked - same state as MouseOver

NOTE:  actually, a true 4-state rollover, where you use a different image for both MouseOver and MouseUp seems a bit odd - as shown in the example on the "Radical Rollovers" page.  Inherently, it makes complete sense that the two states should be identical - when you release the mouse button, your mind is expecting the image to snap back to what it was before you clicked the button down.

 

Preload - THE CARDINAL RULE FOR ROLLOVERS !!

Preload code goes between the Head and Body tags
 ( after <Head> and before <Body> )

In addition to the 4-state requirement, the perfect rollover must occur "fast".  This requires that the images are "preloaded" as soon as the page opens.  Yet - 90% of all rollover scripts I have seen have neglected to include preload  !!!  I will show you how to fix that here.

 

The scripts without preload do not load the mouseover image until the mouse is moved over it.  Users move and work quickly, and when they move the mouse over the rollover or click on it, the swap should occur within a few milliseconds.  They will not wait, so No Preload = No Rollover.

 

Rollovers simply will not work properly without preload !!!  Without preload, the user would have to wait a few seconds before the image is swapped in.  And, since no user will wait, the rollover "doesn't work".  But amazingly  . . . most of the thousands of rollover JAVA samples on the Internet, do not include preload code.  They don't even mention that you need it.  You must include Preload with every rollover.  Bottom line.    

 

Actually, you can add preload code to any web page - not only those with rollovers.  It is a little-known secret, and if used effectively, can grease the gears of your entire site.  There are two ways of implementing Preload :   

 

Method 1)  Preload on the Rollover Page

 

This causes the swap images to load, after your page and the base images have loaded.  Therefore it won't work if the user moves the mouse over the base image as soon as he sees it - this method does rely on a small amount of time !!  However, most users wait a few seconds to at least survey the page before moving their mouse.

 

This method has the preload code on the same page as where your rollovers are, so the mouseout image does not need to be preloaded because it loads with the page anyway (it is the default image).  Here is the code to preload two images - the mouseover and mousedown images. :

 

<SCRIPT LANGUAGE="JavaScript1.1">

img1 = new Image(); 

img1.src = "mouseover.jpg"; 

img2 = new Image(); 

img2.src = "mousedown.jpg"; 

</SCRIPT>

IMOPRTANT:  preload code, like all JAVA scripts, goes after <Head> and before <Body>

NOTE:  do not preload the default, MouseOut images

Method 2)  Preload on the Referrer Page

This is my preference for larger images, because all images are loaded before the rollover page loads - they just pop into view instantly !!  In fact, you can even place the preload all sorts of images - and even on your HomePage so that by the time the user reaches other pages - the images will immediately snap into view - VERY COOL.

But for rollovers, in general the images are small on Method 1 works fine.  The images load within several seconds, so placing the preload code on the same page should not be an issue, and there is no need to place the code on the referrer page.  

Also, if you do this a lot it can become confusing to follow.

NOTE:  as you were reading this page - it has preloaded all the rollover images for the links below - fixing the "delay" problem !!!  They are all tiny files, so the preload happens within a few seconds - so even if you only read one sentence and then move on - the images are now loaded in your browser's cache.

 

 

Rollover Scripts and Samples

Rollover1 - true 4-state, 4 image - the Best IMO !!!  -  no JAVA !!!
NOTE:  this script has no preload - so add your own as described above

Rollover2 - the simplest code but only 2-state and no Netscape 4.x - one Line of code per Rollover
NOTE:  this script has no preload - so add your own as described above

Rollover3 - the worst - only 2-state - FrontPage DHTML
NOTE:  this script has no preload - so add your own as described above

Rollover4 (ImageReady) - "true" 4-state, 4 image - but only one rollover per page
NOTE:  this script has it's own preload