Next I add an imagemap. Note that you can now click inside the purple square (and only inside the purple square) to go to a new page.

Now comes the tricky part. I want a different image to appear over the purple square if (and only if) the mouse is over the purple square. Here's the image I'm talking about. It's just another solid square to keep things simple.

So far, I've been able to produce something that almost gets what I want. I use DHTML to place the new image over the old one, hidden by default. I then toggle the visibility flag of the image on and off using the standard onMouseOver and onMouseOut event handlers. Here's what I get:

Notice that when you move your mouse over the purple square, the red square appears, but not in the right location because the coordinates of the red square are (deliberately) wrong. I want the red square to completely cover the purple square. So, I change the coordinates of the red square so that it overlaps the purple square, and here's what I get:

As you can see, this produces some strange flickering of the squares as you move your mouse across them. This problem occurs both in Internet Explorer 6 under Windows and Mozilla 1.2b under Linux. I can't tell if this is a browser bug, an error in the DHTML spec, or what. I just can't see anything in my code that would cause this flickering. Looking at the source code should prove that the only difference between the two imagemaps is the coordinates of the overlapping image. Here is a page containing only the minimum amount of code needed to reproduce the problem.

Note: I realize that there is a simple workaround. I could modify the overlapping image so that it's identical to the background image, except for the portion that I want to change during mouseover. Then I could simply replace the entire image on mouseover instead of dealing with coordinates and layers. Unfortunately, this is undesirable because the background image I will be using is very large, and duplicating it in the overlapping image would be a major waste of bandwidth. I also realize that I could implement what I need as a Java applet, but again, that could cause some speed and compatibility issues that I'd like to avoid if possible.

Update

Inspired by a comment from funkywizard-ga, I discovered that if I give the overlapping image a link, the cursor stops changing as it moves over the hotspot. Although this is an improvement, the flashing problem still remains, as shown here:

Update #2

Here's a fix suggested by kww81-ga. He simply adds onMouseOver and onMouseOut handlers to the link and removes the onMouseOut handler from the image map, like this:

This works perfectly for me. Thanks, Kev!