Share via

Creating Image Mouseovers

  • Article

After I learned JavaScript, the first thing I did was create an image mouseover. The one I created was relatively simple, just a few lines of code. I've since seen many more complex examples that do basically the same thing as my simple little script. I'm not sure whether complex is better...although the complex examples do have two debatable benefits for the developers: one, making them hard to read (and thus hard to steal and modify); and two, making me feel incredibly stupid. Hmm. I definitely prefer simplicity.

The script that I made way back then was a simple one-function script that I called in both the onmouseover and onmouseout events. The function took one parameter, which was a reference to the IMG element. All I did was swap the image displayed for a new image by changing the src property. Simple. Except that it didn't work in Netscape Navigator. I never understood why, I just rewrote it.

I promised to provide an image mouseover script a few posts ago, so in today's post I'm providing a very simple mouseover script that you can use in your Web pages. This script is only slightly more complex than the one I first wrote, but it does the trick in a single function and only a few lines of code. This script works in Internet Explorer, Netscape Navigator, Mozilla, and Opera, and there doesn't appear to be any difference in the way the script functions in each browser.

The script makes a few assumptions that you will need to understand. It assumes that the filename for the normal, onmouseout image ends with "Off.gif," and the active, onmouseover image ends with "On.gif." It also assumes that the images are stored in a folder named "graphics" that lives in the folder in which the page is stored. Your file structure and image-naming convention may be a bit different, so let me show you the script and explain it.

 function mouseoverImage(image)
 {
 var s = image.id;
 var ssrc = image.src;
 
 if (ssrc.match(/[Oo]ff/))
 {
 image.src = "graphics/" + s + "on.gif"
 }
 else
 {
 image.src = "graphics/" + s + "off.gif"
 }
 }

The script uses a regular expression to determine whether the string "off" exists in the filename (or the value of the src attribute of the IMG element passed by using the image argument). (If you are unfamiliar with regular expressions, see the article Regular expressions on Office Online). If the string exists, the script changes the image's src attribute to the "On" image, and if it doesn't exist, the script changes the src attribute to the "Off" image.

Here's the HTML that accompanies this script.

 <img src="graphics/ImageOff.gif" id="image" 
 onmouseover="javascript:mouseoverImage(this)" 
 onmouseout="javascript:mouseoverImage(this)">

This code assumes that you have two images: one named "imageOff.gif" and one named "imageOn.gif." You should be able to easily modify the filenaming for your own images; however, your images should have a base string that is the same.

For example, you might want to use mouseover images with a menu. If the text for a menu item was "products," your images might be named "productsOff.gif" and "productsOn.gif"; or the normal image might be "products.gif" and the mouseover image "productsOn.gif" or "productsOver.gif."

There are a number of possible combinations, but my point is that they both have a base string of "products." So you would set the image's id attribute to the base, the src attribute to the normal, onmouseout image, and then set the script calls in the onmouseover and onmouseout events. If your images are named differently, you need to make a few modifications to the script as well.

The regular expression "[Oo]ff" locates the occurrence of "Off" or "off" in the filename. If neither your normal nor your active image contains either string, the script won't function unless you change the regular expression. About the only thing that would complete this script is a script that preloads the images. You can find numerous such scripts online, and FrontPage comes with a preload script. I'll cover preloading images in a future post for those who may not understand why this is important.

Comments

  • Anonymous
    December 10, 2004
    Untested, but did you ever try this approach and take the values out of the function?


    function mouseoverImage(image,sOn,sOff)
    {
    var s = image.id;
    var currentSrc = image.src;
    if (currentSrc.match(sOn)
    {
    image.src = currentSrc.replace(sOn)
    }
    else
    {
    image.src = currentSrc.replace(sOff)
    }
    }



    mouseoverImage(this,'On','Off')

    http://weblogs.asp.net/andrewseven/articles/IOpineTarget.aspx
  • Anonymous
    December 13, 2004
    The comment has been removed
  • Anonymous
    December 14, 2004
    Hi, Andrew,

    This would probably work (I didn't test it, either) with one change. If I remember correctly, the replace method requires two arguments: one for the text being replaced, and one for the text replacing it. So the replace lines should read:

    image.src = currentSrc.replace(sOff, sOn);
    //and//
    image.src = currentSrc.replace(sOn, sOff);

    There are many ways that you can accomplish mouseover effects. The scripts provided here are only a couple different ways. There are many, many, many more ways available online at places like http://www.javascript.com, http://www.dhtml.com, and others.
  • Anonymous
    April 26, 2005
    Simple plus elegant. However, I don't have your deep level of expertise, but am somewhat competent. I tried using your approach, in a frontpage shared border. I am getting a page error on the mouseover command. Thoughts?