Coolnerds onMouse... Images Examples

There's a lot to understand in order to get an onmouseover/onmouseout thing to work in JavaScript. First, understand that Netscape doesn't support the use of onmouseover and onmouseout in the <IMG> tag. But it does in the <A HREF=...> tag. So you need to wrap the image in a pair of <A>...</A> tags and put the onmouseover and onmouseout events in the <A> tag.

Secondly, you need to understand how images are named in JavaScript. They're actually numbered from left to right, top to bottom, as they appear in the page. Thus, in this page the beanie in the top left corner is named document.images[0]. The first image below is named document.images[1], and so forth.

Finally, in order for the effect to work well, you want to pre-load the graphic image that appears when the mouse pointer touches the original image. A simple way to do that is to display the image as a 1x1 pixel dot at the end of a sentence, where it looks like a period. (You can also do it with an array, but let's not complicate things right now.)

Tip: My Rollover Slideshow example illustrates using a JavaScript array to preload graphic images.

Howdy Example

So, here's how the HOWDY example in the previous page works. At the end of the sentence just above the HOWDY graphic is this tag:

That tag gets the image named howdyLight.jpg, shown below, onto the user's PC right when that tag is read. (Yes I know my graphics are pathetic...but we're focusing on code here, right?)

When doing this in your own page, you'd need to replace howdyLight.jpg with an absolute or relative reference to the image you want to appear when the mouse pointer touches the image.

The HOWDY image that you first see on the page is displayed by this set of tags:

<a href="javascript:alert('Normally this would be a link.')"
     onmouseover="changePic(document.images[2],'howdyLight.jpg')"
     onmouseout="changePic(document.images[2],'howdyDark.jpg')">

<img border="0" src="howdyDark.jpg" width="103" height="33">

</a>

The action takes place in the onmouseover= and onmouseout= events in that <A> tag. The onmouseover= tag calls a JavaScript function named changePic(). It passes to that function the name of the image to be changed (document.images[2] in this example, because the beanie is number [0] and the little 1x1 pixel is image[1]). It also passes the name of the image to be shown, howdyLight.jpg in this example. In your own page, you would need to replace document.images[2] with the name of the image to be changed, and howdyLight.jpg with the and absolute or relative reference to the graphic image to be displayed when the mouse touches the picture. And it should, of course, be the same image shown in the 1x1 pixel.

So where is this changePic() function? It's in the head of the onmouse.htm page that shows the example, and it looks like this:

<script language="JavaScript">
  function changePic(objName,picName) {
     objName.src=picName
  }

</script>

A simple chunk of code really. Especially when you consider all the hullaballoo leading up to it. The function simply changes the source (src= property) of whatever image name is passed to it, to whatever image is passed to it. For example, when called as changePic(document.images[2],'howdyLight.jpg') the function changes the source of document.images[2] to howdyLight.jpg.

The onmouseout event of the <A> tag calls the exact same script, put passes to it the name of the original image, howdyDark.jpg, like this: onmouseout="changePic(document.images[2],'howdyDark.jpg')". Once again, in your own page, you'd need to replace the 2 with the number of the image to be changed, and the howdyDark.jpg to an absolute or relative reference to the image that's to appear when the mouse leaves the hyperlink. My howdyDark.jpg image looks like this:

By the way, the HREF= portion of the <A> tag in this example pops a message on the screen, using javascript:alert('Normally this would be a link.'). I real life, I suspect you would want to change that to a URL or relative reference to some page, so that clicking the link would take the reader somewhere. Doing so wouldn't have any negative effect on the onmouseover and onmouseout events. The only reason this pages displays a message when you click is because I don't want the click to take you to another page.

So that's how it all works. A little bit of code but a whole lot of underlying concepts.

TP Example

The Toilet Paper example works on the same concepts described at the top of this page, and uses the same simple changePic() function. First, the initially invisible toilet paper image is preloaded into a 1x1 pixel image, disguised as a period at the end of the sentence that precedes the image. That's just a normal <IMG> tag like this:

Again, in your own page you would need to change tp.gif to an absolute or relative reference to the graphic image that's to appear when the mouse pointer touches the link.

The link itself is just normal text enclosed in <A>...</A> tags. The <A> tag contains the onmouseover and onmouseout events that are triggered when the mouse pointer touches, and leaves, the hyperlink text:

The images in this example are tp.gif and transp.gif. The transp.gif is a graphic GIF file that's exactly the same size as tp.gif. But transp.gif has only one color, and that color is defined as the transparent color. Hence, the image takes up space on the screen, but is entirely invisible. Here's both images, with transp.gif shown before setting its transparent color to red (more great art):


transp.gif (before setting its transparent color to red)	tp.gif

So this example is virtually identical to the HOWDY example -- it just uses a textual hyperlink and one "invisible" image.

The Button Example

The <IMG> tag that displays the outbttn.gif image is shown below. The <A>...</A> tags defines what happens when one actually clicks on the button (a click is defined as pressing, then releasing the primary mouse button, i.e. a mousedown+mouseup):

Since the <IMG> tag itself contains the onmousedown and onmouseup events, we can use the keyword this rather than the long document.images[x] name when calling the changePic() function. Otherwise, the idea is exactly the same as the previous example. When the mouse button goes down on the image, the source of the image is changed to inbttn.gif. When the mouse button comes back up, the source of the image is changed to outbttn.gif. Here are those two graphic images.


outbttn.gif	inbttn.gif

In this example, the <A HREF= tag just displays a JavaScript alert message. To make the button act as a hyperlink, you'd want to change the javascript:alert('I too could be a hyperlink') to an absolute or relative reference pointing to some web page.

Coolnerds onMouseOver Examples - How it's Done

Howdy Example

TP Example

The Button Example