---

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Index of Examples

---

Let's learn about two more events - onMouseDown and onMouseUp. These are fairly self explanatory. Here is an example...

Here is this effect on a page by itself.

Note that onMouseDown and onMouseUp are supported by newer browsers only (NN4+, IE4+). Older browsers will only display an effect onMouseOver. Really old browsers, or browsers with javascript turned off won't do anything except render the original image. For those with javascript turned off, if your HREF attribute points to a URL, the user will go there. If it points to a javascript function, nothing will happen.

Here is the code for the above effect along with the image preloading statements and the three images used...

<A HREF="javascript:nada()"
   onMouseOver="hiLite('img01','press___up')"
   onMouseOut="hiLite('img01','press_init')"
   onMouseDown="hiLite('img01','press_down')"
   onMouseUp="hiLite('img01','press___up')"><IMG
      SRC="press_init.gif" WIDTH="56" HEIGHT="22" BORDER="0" ALT="" NAME="img01"></A>

The preloading statements..

press_init = new Image(56,22); press_init.src = "press_init.gif";
press___up = new Image(56,22); press___up.src = "press___up.gif";
press_down = new Image(56,22); press_down.src = "press_down.gif";

The images...

Place a url in the link (<A HREF="somewhere.html") and it will take you somewhere...

Of course you can also integrate this into other javascript methods and functions. Try each of these...

     

The above effects on a page by themselves... effect 1 - effect 2

I'll take this time to explain another event. The onClick event. Here is an example that executes one of the previous javascript functions...

<A HREF="javascript:sayHi()"
   onMouseOver="hiLite('img05','clickme2')"
   onMouseOut="hiLite('img05','clickme1')"
   onClick="sayHi(); return false"><IMG
      SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img05"></A>

Normally this event handler is not used in a mouseover link to a url or function. One circumstance where it would come in handy is a web server that alters your links. The only one that comes to mind is XOOM although there may be more. When you click on a link in a page on XOOM and the link supposedly points to page.html, XOOM alters that link behind the scenes to actually look for _XOOM/page.html (or something like that). An ill-concieved mechanism such as this can find separate html pages with no problem. BUT, when the link points to myfunction(), the browser is tricked into looking for _XOOM/myfunction(). Since it doesn't exist, the function doesn't execute. What's the cure? (You mean besides get your pages off of XOOM and tell them to eat your shorts?) If you add an onClick event handler to the link, you can sidestep this problem because most browsers will honor the instructions in onClick() before the instructions in the HREF attribute. Another reason to use onClick is so that you can "return false". Without getting into detail, this kills a sticky hourglass problem in Netscape.

Can you use an animated gif in a mouseover?

Why yes, we can...

Here is this effect on a page by itself.

But... we have do do things a teensy bit differently. We don't preload the images. As far as why, I'll defer to a USENET post by Christopher John Robb...

So, this is what's going on in that last example...

<A HREF="home.html"
   onMouseOver="hiLite2('img06','anihome_up.gif')"
   onMouseOut="hiLite2('img06','anihome_down.gif')"><IMG
      SRC="anihome_static.gif" WIDTH=60 HEIGHT=25 NAME="img06" BORDER=0 ALT="Home"></A> 

Notice in the code above we are sending to the function the image location and the image source (as opposed to the image object name.)

Also we're using a slightly modified function for this example...

function hiLite2(imgName,imgSrc) {
if (document.images) {
document.images[imgName].src = imgSrc
}}

It's similar, yet operates slightly differently.

Can we combine mouseovers with image maps?

Yes... but.... It can get a little tricky. There are a few things we must take into consideration...

1. We must be very precise with our map coordinates.
   And because we're relying on javascript for navigation,
2. We should take into consideration those who have javascript disabled
3. We should take into consideration those browsers that can't do mouseovers.

Here is a separate page with this effect all by itself.

This effect is made up of five images...

Depending on the position of the mouse, one of the five images is displayed. The tricky part is how to get the image to not only display the last four images, but to revert back to the first image onMouseOut... and all without a nasty flicker.

The key is in the map coordinates. Look at the following image. This is how the image map is cut up.

When the cursor is over the blue, yellow, purple or green areas, the appropriate expanded image is displayed. As the cursor passes over the red area, both the MouseOver and the MouseOut are set to the collapsed image (that is, the first image in the row above). This is an important point. Note that in the MAP code the first four areas define a part of the image but the last area encompasses the entire image. In the event of conflicting coordinates, the browser places the highest priority to the first area listed. So, as you move your cursor around, if it is over one of the smaller areas, that mouseover takes precedence and the appropriate image is displayed. As you move the cursor towards the edge of the image the last area code kicks in and the image pops closed.

It is important to look at the coordinates. If you look closely at the numbers, you'll see that there is slight overlap between the areas. The coordinates are defined as follows...

"x,y,xx,yy" translates into:

x,y
 +----------------------+
 |                      |
 |                      |
 +----------------------+
                       xx,yy

You'll see the yy value of one area is identical to the y value of the area below (24&24, 38&38, 54&54). This is a one pixel "overlap" between the areas. This is important because it prevents the image from flickering between areas.

Another thing I've done is to take into consideration surfers with their javascript disabled. Some folks get really worried about javascript (personally I think their fears are largely exxagerated). If you want to allow them to navigate your pages, you have a little extra work to do.

Here is the code for the effect...

<SCRIPT LANGUAGE="javascript"><!--
   document.write("<P><A HREF=\"javascript:nada()\"><IMG SRC=\""+picture_source+"\" width=76 height=76 NAME=\"img09\" border=0 USEMAP=\"#dir1\"></A>");
   //--></SCRIPT>
<NOSCRIPT>
   <IMG SRC="dir_down_1.gif" WIDTH="76" HEIGHT="76" BORDER="0" USEMAP="#dir2" ALT="Directory: Home-Mail-Links">
   </NOSCRIPT>

The red portion is the part for those with javascript. It actually writes the code using javascript so if javascript is disabled, it won't write and the </NOSCRIPT> section will kick in. That noscript section simply displays a static expanded image that points to a second set of map coordinates. Once again, it may sound complex, but it's really not. It's just a few simpler things combined into one.

The last precaution we'll take is to concern ourselves with browsers that have javascript, and have it enabled, but it's an older version of javascript and it doesn't recognise the image object which makes it mouseover-incapable. We do this with the following bit of code in the head tags...

if(document.images){
  picture_source = "dir_up.gif"
}else{
  picture_source = "dir_down_1.gif"
}

Translated this says "If the browser supports the image object, display the collapsed image. If not, display the expanded image."

If you look at how we wrote the code to display the image...

<SCRIPT LANGUAGE="javascript"><!--
   document.write("<P><A HREF=\"javascript:nada()\"><IMG SRC=\""+picture_source+"\" width=76 height=76 NAME=\"img09\" border=0 USEMAP=\"#dir1\"></A>");
   //--></SCRIPT>
<NOSCRIPT>
   <IMG SRC="dir_down_1.gif" WIDTH="76" HEIGHT="76" BORDER="0" USEMAP="#dir2" ALT="Directory: Home-Mail-Links">
   </NOSCRIPT>

...you'll see the variable picture_source plugged in for this purpose.

Once again, this is a bit more than a simple mouseover and if you want to study it, you should really look at the effect on a page all by itself.

In part five we'll do still more with the humble mouseover...

Magic Buttons - Javascript MouseOver Tutorial

Part 1  ·  Part 2  ·  Part 3  ·  Part 4  ·  Part 5  ·  Images  ·  Index of examples

HTML 4.0 Reference      Barebones HTML Guide