<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 5: Mouse Overs & Image Swapping

Mouse Overs: Mouseovers (swapping images when the mouse is hovered over a button or link) is one of the most common uses of JavaScript. There are various ways this can be accomplished.

<script language="JavaScript">
function On(){
document.myImage.src = "images/Here_Over.gif";
return true;
}

function Off(){
document.myImage.src = "images/Here.gif";
return true;
}
</script>

<a href="default.asp" onMouseOver="On();" onMouseOut="Off();">
<img src="images/Here.gif" name="myImage" border="0"></a>

We use the Document Object Model to call the named location (called "myImage") and swap out the source of the image we are using. Note the "off" state image is the image source PRIOR to the swap! That is standard, since you want to see the original image at first, and then again any time the person mouses OFF of the image/button. Example: Simple MouseOver

When a page loads, any image that is used right away is loaded into the cache of the browser. The images that are used in the previous version of the mouse over are not loaded until they are called for, making the previous example inefficient.

To eliminate the loading of images during a mouseover, all images that may be used should be preloaded:

if (document.images){
good = new Image (100, 50);
good.src = "images/good.gif";
evil = new Image (100, 50);
evil.src = "images/evil.gif";
}

The if statement (document.images) checks to see if a browser is capable of seeing images via JavaScript. It harmlessly does not run, if the browser can't perform this simple test.

The next example preloads the images, and accepts the name of the button to be passed to an "on" or "off" state function.

<script language="JavaScript">
if (document.images){
good = new Image (100, 50);
good.src = "images/good.gif";
evil = new Image (100, 50);
evil.src = "images/evil.gif";

function on (imagename){
      if (imagename == "good"){
      document.images['good'].src = eval ("evil.src");
      }
      if (imagename == "evil"){
      document.images['evil'].src = eval ("good.src");
      }
}

function on (imagename){
      if (imagename == "good"){
      document.images['good'].src = eval ("evil.src");
      }
      if (imagename == "evil"){
      document.images['evil'].src = eval ("good.src");
      }
}

}
}

This example also uses a couple of other interesting examples. The image is called in the image "array" (a set, or collection of like objects) using the Document Object Model (DOM) but is called by name inside the square brackets indicating an array.

Also, the imagename that is passed is compared to the possible names of images (good or evil) and source of the current image is "evaluated" with the word "eval", which is an important JavaScript function. "Eval" will look at the data you have input into a string, and will attempt to run whatever JavaScript is inside, prior to running the rest of the line of code. This is very helpful if we are going to pass data with variables, and want to run the code prior to running the rest of the function. Example: Good/Evil MouseOver

The next example is similar, but uses the mouseover to swap an image in a different location. Notice the image named "blank", where both images are swapped out, replacing the blank image. Remember the "blank" image (ususally a transparent gif) needs to be swapped as well, creating a third image used in the swap. Example: Bush/Gore MouseOver

The final example is a three state button, meaning there is also an image that is swapped out onclick, or better yet, onMouseDown. Example: Three State MouseOver

Here is another example, where the location to be swapped, and the name of the new image are passed to the function:

function rollImg(imgLocation,imgName) //Passing what to swap, and what to swap it to!
{
document.images[imgLocation].src = eval(imgName + ".src"); //evaluate the info, and declare the new image!
}

<a href="#" onMouseOver="rollImg('button1','button1over')" onMouseOut="rollImg('button1','button1out')">
<img src="images/btn1.gif" name="button1" border="0" >
</a>

This example does not require more than one function, since the developer will pass the "out" image to the button, just like any other image! Example: Single Function MouseOver

Here is one more version, only this time, you can pass in a comma delineated (separated) string of names of images, and names of image locations, and swap out as many images as you want, at once. This is very flexible, in that you can pass in a single value for a mouseover, or be much more creative! Example: Multiple Image Swaps

 

 

Back To Top

 
2000, 2001, 2002 webdeavor, INC. & newmanic,   All rights reserved