Site hosted by Angelfire.com: Build your free website today!

Here is another pretty cool Roll-Over I learned how to do! Move your mouse over the first IE button.:)

The Source:

<SCRIPT language="JavaScript">
</SCRIPT>

Explanation:

I first used something really cool! Instead of using the regular browser detection, I used the handy-dandy object detection function. It shortens down the code by about 15-20 lines and is very effective. You don't have to code a seperate function for every browser. Now if the browser supports the document.images function, it will do the desired stuff.

Now for the functions. The functions remained unchanged, except that I used an object detection again in place of browser detection.

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

Everything else is the same, I just needed to change one image on the mouseover. The trick to making it change a different image comes in the parameter I am going to send the function when I call it.

Adding the HTML

Here is what I needed to do for the HTML part of the page:

<A onMouseOver="lightup('pic2')" onMouseOut="turnoff('pic2')"  href="#">
<IMG src="images/ie.gif" border="0"  name="pic1"></A>

<IMG src="images/ie2.gif" border="0"  name="pic2">

Ahh...here is the real trick. We assign a bogous name for the image you don't want to change, and assing the image that you do want to change with the name pic2, or whatever you assing the roll-over name. After that, when a user moves over a link, whatever image is assigned the mouseover name will change! AWESOME!! Check it out below!