Mouse Overs

To do a Mouse Over, you need several things:

  1. A normal (non-mouse-over) Image and an alternate (mouse-over) image
  2. Javascript to change the displayed image, on the mouse over event
  3. A place to store it all
  4. Know where it will, and will not work
What you DON'T need, are fancy expensive software tools.

The Images

Assuming you want the mouse over to show 2 different images, you of course need 2 images. The normal image and the image displayed when the mouse enters the image area. In this example, there are 2 images named school.jpg and school_bw.jpg:

and

If we look at the normal HTML code (what web pages are made up of) used to display an image, it involves the IMG tag. You can see the HTML tags in practice on this page if you view the source code for the page (that's HTML source code). But here is an example IMG tag:

<IMG SRC="school.jpg">

Note that the IMG tag uses a SRC attribute to define what image gets displayed (school.jpg in the above example).

Javascript

To make the mouse-over interactive, we need to run some very simple Javascript code to change the 'SRC' value for the IMG tag, thereby showing another image. For clarity, this example places that code into a reusable function. We will call this function when the mouse moves over the image (to show the alternate image) and when the mouse leaves the image (to resort back to the original image).

Here is a javascript function to change the SRC attribute of an IMG tag (note it is placed inside an HTML SCRIPT tag):

<script  type="text/javascript">
function ShowImage( ImgElement, NewSrc ) {
	ImgElement.src=NewSrc;
}
</script>

Our demo function is named ShowImage. You pass to it the IMG element to be changed (ImgElement), and what the new SRC (image filename) is to show (NewSrc).

HTML tags or elements like IMG allow you to define pieces of code or functions that get executed on certain events. For our mouse over the image we want the 'onMouseOver' event and for mouse leaving the image we want the 'onMouseOut' event. If we go back to our original IMG tag example, here is a modified version that will call our 'ShowImage' Javascript function to display the appropriate image when the mouse goes over or leaves the image:

<IMG SRC="school.jpg" onMouseOver="ShowImage( this, 'school_bw.jpg' );" onMouseOut="ShowImage( this, 'school.jpg');">

Our particular example calls to ShowImage pass 'this' as the first parameter. 'this' is a special meaning within an element or HTML tag like 'IMG': it means that particular element. So 'this' will be passed to ShowImage as the IMG tag that is calling it.

And that's it! All of the HTML and Javascript needed to do a mouse over is shown here: 
<script  type="text/javascript">
function ShowImage( ImgElement, NewSrc ) {
	ImgElement.src=NewSrc;
}
</script>
<IMG SRC="school.jpg" onMouseOver="ShowImage( this, 'school_bw.jpg' );" onMouseOut="ShowImage( this, 'school.jpg');">

To add another mouse-over image, simple make a copy of the IMG tag, and change the image filenames as desired.

A place to store this stuff

The images need to be stored on a web server somewhere, so people can access them. The Javascript and HTML needs to be stored in an html file or script like PHP, ASP, etc., also on a web server. Assuming that you don't want a page where the ONLY thing is the rollover, you will want to insert the javascript and IMG tags into an HTML file at the appropriate places.

Where it won't work

Pretty much the only place a roll over won't work are in forums and newsgroups. It's not that they won't work, but that they can pose a security risk to visitors, so most forums take extra steps to insure that javascript can NOT be placed within messages. If a forum allows Javascript, then it will work like a charm.