You see them a lot. Your mouse cursor travels across a page image and the image changes.

Until today, it required a bit of technical confidence to write mouseover JavaScript.

Now, it only requires 4 easy steps!

The JavaScript is copy and paste. JavaScript is line break sensitive. Thus, you copy it from the demo page at http://willmaster.com/possibilities/demo/mouseovers.shtml (Just "view source" and save it to your computer. Or, use Master Snooper at http://willmaster.com/master/snooper/ to make sure you get everything the way it actually is in the file rather than an altered version which some browsers display.)

To make it easier for you, instructions are embedded into the JavaScript source code.

The four steps are:

1	Create your page the way you want it to appear when it first loads into a browser. And paste the JavaScript code before your </head> tag. (Note: The images you intend to be mouseovers must be links.)
2	Count the number of mouseover images you have on your page and type the total count in the place where the instructions say to do so. Definitions for this article: mouseover image --   the image that is visible when the browser first loads, and that will be replaced if the mouse travels over the top. replacement image --   the image which replaces the mouseover image when the mouse travels over the top. NOTE:  The image size of both the mouseover image and the replacement image must be the same. The file sizes may be different. The file extension may be different. But the image size must be the same. Okay, it will work even if the image sizes are different. But one of the following will happen: If you use height= and width= size attributes in your <img... tag, then the replacement image will be squeezed or stretched to fit into the mouseover image size. If you do not use size attributes in your <img... tag, the replacement image might squeeze or stretch; but it is more likely to fill a different screen area than the mouseover image did. Filling a different screen area could make your page look cluttered and confusing.
3	For each mouseover image: Starting at the top, do a sequential count of each <img... tag until you get to the applicable mouseover image. Type the count where the instructions say to do so. Type in the mouseover image's SRC (the same SRC your HTML code uses to display the image) where the instructions say. An SRC can be of the form "http://www.domain.com/image.gif" or "../pictures/image.gif". Type in the SRC of the the replacement image (the SRC you would use if you were to code it into your HTML page for display).
4	Modify the anchor tag ("<a ...") for each mouseover image. Two tag attributes must be inserted: onmouseover="m_over(#); return true" onmouseout="m_out(#); return true" Replace the "#" character between both parenthesis pairs with the set number relating to your image in STEP (3). If it is your first image set, replace the # with the digit 1. If it is your second image set, replace it with 2. And so forth. (There should be as many image sets as the number of mouseover images you specified in STEP (2).) The modified anchor tag will look something like this: <a href="otherpage.html" onmouseover="m_over(1); return true" onmouseout="m_out(1); return true"> Insert the above attributes, with correct numbers between the parenthesis, within the anchor tag of each mouseover image.

That's it!

The JavaScript source code which you copy from the demo page even includes debugging information -- in case you miscount your images, reverse the original and overlay graphic URLs, or step into some other easy to make mistake.

Some things to know:

• With mouseovers, your page will take longer to load. This is because both the mouseover and the replacement images load into your visitor's browser -- whether the replacement is needed or not.

• Your visitor's browser must be JavaScript enabled for the images to change. Otherwise, they don't get the nice effects. (Which is a reason to make your page look good before you insert JavaScript code -- so visitors with JavaScript challenged browsers see a presentable page.)

• It is easy to overdo mouseovers. Especially at first, when you may experience a desire to show off your newly acquired skills. Unless it somehow aligns with your site's purpose, gaudy is an unwelcome distraction.

• The previous point notwithstanding, subtle mouseovers, especially when they do not unduly increase page loading time, can be a mark of professionalism. They can put your site a level above the rest. Mouseovers can show you care enough to place fitting enhancements, and can perk the interest of the casually indifferent surfer.

Now go get the JavaScript code. Make yourself a practice page. Show yourself you can do it.

The more you can do, the higher your confidence rises. And the higher your confidence rises, the more you can do.

Debugging

• Do not change anything on the lines which end with:

• Each line that you change must end with a semi-colon ";"

• JavaScript error: "graphics[...] has no properties"
  or
  JavaScript error: "graphics[...].src is not an object"
  (or something similar with "graphics[...]")

  Correct the value of number_of_mouseover_images in STEP (2).

• Nothing happens when the mouse moves on the image:

  Correct the value of over_lay[#] in STEP (3). Check spelling.

• Nothing happens when the mouse moves off the image:

  Correct the value of original[#] in STEP (3). Check spelling.

• The mouseover picture shows up only when the mouse moves OFF the image:

  Reverse the values of original[#] and over_lay[#] in STEP (3).

• The mouseover picture shows up, but in the wrong place:

  Correct the value of picture[#] in STEP (3).

• Nothing at all happens (check all of the following):

  STEP 4 may not have been done correctly.

  Some or all of the of the picture[#] values in STEP (3) may be incorrect.

  Some or all of the of original[#] and/or over_lay[#] values in STEP (3) may be misspelled or reversed.

  The number_of_mouseover_images value in STEP (2) may incorrect.

If you need help let me know.

Copyright 1999 by William Bontrager

William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" e-Newsletter
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com