Untitled-1

Rollover 4 - ImageReady Rollover

Main Problem - I can't get this to work with more than One Image !!!

Sample 4-State ImageReady Rollover - the four images


Out	Over	Down	Up

Script from ImageReady 3-State Rollovers - you simply "Save Optimized" as an HTML and ImageReady writes the code for you and saves the HTML file and the 3 image files. Includes image preload - but I prefer to add preload code to the referrer page so that when the user hits this page, the image immediately pop into place.

This is a "true" 4-state (out-over-down-up) - 4 image rollover and works with all Browsers.

But again - using two different images for the two states is odd and not recommended, since the mind "expects" the MouseDown image to snap back to the previous state (MouseOver) once the mouse button is released. So MouseUp should use the same image as MouseOver.

Here I am using different images for the states just to show that it works. I would never do that in actual web design. Always use 2 or 3 images for 4-state rollovers: The rule of thumb is:

MouseOver = MouseUp (always)

MouseOut = MouseDown. (if you only have two images to work with)

The Code

<!--

function newImage(arg) {if (document.images)

{rslt = new Image(); rslt.src = arg; return rslt; }}

function changeImages() {if (document.images && (preloadFlag == true))

{for (var i=0; i<changeImages.arguments.length; i+=2)

{document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; }}}

var preloadFlag = false;

function preloadImages() {if (document.images) {

Display_over = newImage("button-over.jpg");

Display_down = newImage("button-down.jpg");

preloadFlag = true; } }

// -->

</SCRIPT>

</HEAD>

<p align="center"><A HREF="#"

ONMOUSEOVER="changeImages('Display', 'mouseover.jpg'); return true;"

ONMOUSEOUT="changeImages('Display', 'mouseout.jpg'); return true;"

ONMOUSEDOWN="changeImages('Display', 'mousedown.jpg'); return true;"

ONMOUSEUP="changeImages('Display', 'mouseover.jpg'); return true;">

</TD><TD>

</TABLE>