---

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

---

After that last exercise you should have something like this...

         

Here is this effect on a page by itself.

What else can we do with this new found skill?

Well, we can fiddle with the variables that we send to the function to allow a mouseover of one image to effect a change in another...

Here is this example all by itself.

And here is the code for the above effect:

<A HREF="javascript:nada()"
   onMouseOver="hiLite('img04','camera_on')"
   onMouseOut="hiLite('img04','camera_off')"><IMG
      SRC="flash.gif" WIDTH="64" HEIGHT="16" BORDER="0" ALT="Flash"></A>
<IMG SRC="camera_off.gif" WIDTH="42" HEIGHT="44" BORDER="0" ALT="Camera" NAME="img04">

And here are the image preloading statements:

camera_off = new Image(42,44); camera_off.src = "camera_off.gif";
camera_on =  new Image(42,44); camera_on.src =  "camera_on.gif";

Notice the camera image is named img04. It isn't a link and there are no onMousever statements attached to it. In this instance it's just an ordinary image. Now, the flash image is the one that does the controlling. Look at it closely and you'll see that it sends variables to the function. On mouseover it sends img04 & camera_on to the function. The function dutifully places image camera_on into image location img04. On mouseout, two more variables are sent to the function reverting it back. This effectively demonstrates that you can control any image on the page from anywhere else on the page.

You'll notice the link points to a second function - nada(). This is an empty function, it does absolutely nothing. Why is it there you ask? Because with some browsers, the only way events such as OnMouseOver will work, is if they are in a link. If you want something that is technically a link, yet does nothing, make the link point to a dead function. Now we have a mouseover that works with most browsers and a link that won't do anything if someone should happen to click on it.

This is the empty function that can go within your <SCRIPT> tags with your other function...

function nada() {
}

What if we want something else showing up in the staus bar besides "function nada()"? Easy, just add the following to your link...

<A HREF="javascript:nada()"
   onMouseOver="hiLite('img04','camera_on');self.status='Clickity-click'; return true"
   onMouseOut="hiLite('img04','camera_off');self.status=''; return true"><IMG
      SRC="flash.gif" WIDTH="64" HEIGHT="16" BORDER="0" ALT="Flash"></A>
<IMG SRC="camera_off.gif" WIDTH="42" HEIGHT="44" BORDER="0" ALT="Camera" NAME="img04">

The first line places a message in the status bar on mousever and the second line removes it on mouseout.

You can use an ordinary text link to affect an image...

Flash

<A HREF="javascript:nada()"
   onMouseOver="hiLite('img04','camera_on')"
   onMouseOut="hiLite('img04','camera_off')">Flash</A>
<IMG SRC="camera_off.gif" WIDTH="42" HEIGHT="44" BORDER="0" ALT="Camera" NAME="img04">

We could combine these effects into a pretty cool text & image menu...

Home
Links
Email

Here is this effect on a page by itself.

And here is the exact coding for that mouseover menu...

<UL>
<FONT FACE="verdana,arial,helvetica">
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0" ALT="" NAME="img07" HSPACE=2>
<A HREF="home.html"
   onMouseOver="hiLite('img07','red_arrow_on');self.status='My HomePage'; return true"
   onMouseOut="hiLite('img07','red_arrow_off');self.status=''; return true">Home</A>
<BR>
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0" ALT="" NAME="img08" HSPACE=2>
<A HREF="links.html"
   onMouseOver="hiLite('img08','red_arrow_on');self.status='My Links Page'; return true"
   onMouseOut="hiLite('img08','red_arrow_off');self.status=''; return true">Links</A>
<BR>
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0" ALT="" NAME="img09" HSPACE=2>
<A HREF="mailto:me@home"
   onMouseOver="hiLite('img09','red_arrow_on');self.status='Email Me'; return true"
   onMouseOut="hiLite('img09','red_arrow_off');self.status=''; return true">Email</A>
</FONT>
</UL>

And these are the preload statements...

red_arrow_off = new Image(12,14); red_arrow_off.src = "red_arrow_off.gif";
red_arrow_on =  new Image(12,14); red_arrow_on.src =  "red_arrow_on.gif";

Take a minute to study what's going on here. It looks complicated, but it's really not.

Here is another exercise that will help you get the ideas firmly embedded in your mind and the skill firmly secured under your belt. Reproduce the following effect...

Canadian Goose Cockatoo Pigeon Stork Swan Toucan

All the images you'll need are here.
This completed exercise is here.

Once again, by actually doing the exercise, you'll gain invaluable experience. And believe me, experience is far more valuable to you than Joe Barta's ramblings.

Are we done yet? Oh no. There's much more to learn and more effects to play with. On to part 4.

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