Thanks go to the great folks at http://www.daxassist.com for this code!
Example of a Disjointed rollover..(opens a new browser window).

This button is NOT a hyperlink:



This button IS a hyperlink (it will open a new window):

If you view the source of this page, you will find a simple rollover javascript which defines a 'CLEAR' image followed by two 'BUTTON' gifs (one 'on' and one 'off') followed by pic1.gif (the image that pops up when you roll your mouse over the first button). If you require more than one popup image, you will also need another rollover button - you need a separate button for each popup you wish to display. Each button is made up of two images - one on and one off.

pics[1] = new Image();
pics[1].src = "images/button1_off.gif";
pics[2] = new Image();
pics[2].src = "images/button1_on.gif";
pics[3] = new Image();
pics[3].src = "images/button2_off.gif";
pics[4] = new Image();
pics[4].src = "images/button2_on.gif";
pics[5] = new Image();
pics[5].src = "images/pic1.gif";
pics[6] = new Image();
pics[6].src = "images/pic2.gif";
pics[7] = new Image();
pics[7].src = "images/clear.gif";

Let's take it stage by stage. There are certain rules to follow when coding rollovers.

1. ALL your popup images MUST be the same size as your 'clear.gif'.
2. Buttons can be different sizes, but each buttons pair of 'ON' and 'OFF' images MUST be identical in size.

The way the rollover effect works is that the 'clear.gif' is displayed while the function is not in use. This can be a transparent image or a default graphic, the same size as all the other images, which prevents a blank square with the little red 'x' in the corner, from being displayed. This gif sits in the holder until a mouse is run over a 'button'. At this point, the holder drops the 'clear.gif' and replaces it with the chosen image for that particular 'button'. This is the line of code that positions the holder on the page:

In this case, I have used a transparent image 1 x 1 pixel in size and resized it here in the code to match the width and height of the images I have used. You will need to alter these values to suit the images you are going to display. (If you are planning to leave the popup area 'empty' when the mouseover effect is not in use like this example, a 1 x 1 pixel transparent gif is great because it loads very quickly) Remember, ALL your images MUST BE THE SAME SIZE or the function will not display correctly. This line of code should be placed where you want the popup images to appear on your page. In this instance, I wanted them to appear to the right of my buttons and used the align attribute in my <img> tag to achieve this result.

The next stage is to code for your images to appear when the appropriate button is hovered over with the mouse. Look at this line of code:

This line is telling the page to change 'img1' (button1_off.gif as defined in the img tag that follows this line of code) to '2' (button1_on.gif - see pics[2] in the script above) and change the 'holder' (clear.gif -which has already been defined in the img tag which positioned the holder) to '5' (pic1.gif - see pics[5] in the script above] when the mouse is placed over the relative button AND THEN TO CHANGE the 'holder' back to pic[7] (clear.gif) and 'img1' back to pic[1] ('button off') when the mouse is taken away from the relative 'button'. This code doesn't "link away" to anything. It just makes the mouseover work.

This code will be a hyperlink and make the mouseover function (as in the second button):

Put this line of code on the page where you want the 'button' to appear. If you do not wish to link to another page or URL, simply add "javascript:;" to your href which will cause the current page to stay in focus. (Notice, after the code calling the mouseover and mouseout function, there is an image tag which calls the image 'button2_off.gif'. This is to display the button in its non mouseover state. From this point, the changes are made on the screen when the mouse rolls over the button image.)

This is a simple and easy to apply piece of JavaScript that can create an effective display function on any web page. Interactive sites are popular as it creates something for the viewer to become involved with. If kept clean and simple, functions like this can enhance your site when used appropriately.