HERE'S THE CODE Place this code in the <head></head> tag on the page on the LEFT. You need to change IMAGE OFF, IMAGE ON, ALT IMAGE OFF, ALT IMAGE ON, and ALT IMAGE FRAME NAME (frame location where the other images that you want to switch are located).


<script language="JavaScript">

var NN3 = false;
image1= new Image();
image1.src = "IMAGE OFF";
image1on = new Image();
image1on.src = "IMAGE ON";
image1alt = new Image();
image1alt.src = "ALT IMAGE OFF";
image1alton = new Image();
image1alton.src = "ALT IMAGE ON";

function on3(name)   {
  document[name].src = eval(name + "on.src");
  parent.ALT IMAGE FRAME NAME.document[name + "alt"].src = eval(name + "alton.src");
}

function off3(name)  {
   document[name].src = eval(name + ".src");
   parent.ALT IMAGE FRAME NAME.document[name + "alt"].src = eval(name + "alt.src");
}

NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}

</script>

This is the mouseover code for the frame on the left. You need to change TARGET FRAME NAME, YOUR LINK, and YOUR IMAGE# OFF


<a target="TARGET FRAME NAME" href="YOUR LINK" onmouseover="on('image1');" 
onmouseout="off('image1')"><img src="YOUR IMAGE1 OFF"  border="0" name="image1"></a>

This is the code for this frame. You need to change ALT IMAGE# OFF & YOUR LINK

<a href="YOUR LINK">
<img src="ALT IMAGE1 OFF" name="image1alt">
</A>

BACK to DEMOS