I'm trying to build an imagemap using DHTML and JavaScript that causes
certain areas of the background image to be replaced by some other
image when the mouse moves over them. This is unlike traditional
imagemap code I've found, which simply replaces the entire image or
modifies an image elsewhere on the page.

I've produced some imagemap code that is exactly what I want, except
that it flickers annoyingly as the mouse moves across the image. My
code is quite simple, so I don't think there's a bug. There must be
something I don't understand about DHTML, or perhaps it's just not
possible unless I write a Java applet. Anyway, I've set up a page that
contains the code and a detailed explanation of what I'm trying to do.
It's here:
http://vocaro.com/google-question/index.html

I'd be happy if anyone can fix the flicker problem. Please note that
this project is for my personal home page, not a commercial site, so I
can't pay much. Also, I have read plenty of DHTML tutorials, FAQs, and
so on, so I would not consider links and references to those kinds of
documents as an "answer". However, I will accept answers such as, "It
can't be done in DHTML and JavaScript alone" as long as there is a
valid reason given. Thanks!

---

Request for Question Clarification by funkywizard-ga on 19 Oct 2002 00:38 PDT

i notice that the flashing affect coincides with the mouse cursor
changing from a hand (indicating a link) to an arrow (as would be
normal everywhere except a link). when i move the mouse slowly, i can
stop it so that it is still over the image, and yet i have an arrow
instead of a hand.

what this leads me to believe is that somewhere when it is deciding to
make the mouseover effect load a new image, it changes the properties
of the image momentarily so that it does not register as a link. if
there were some way to assure that the mouseover always referenced a
link, i would suspect the problem would go away.

as a clarification, if i were to offer code that utilized tables but
provided the desired result, would this be adaquate? it would require
that you segment your page such that everything except the mouseover
would be in one portion of the table, and the part that needs the
mouseover code would be in another cell on the table. this would be
instead of the imagemap setup, which i am less familiar with in any
case.

i have some nifty mouseover stuff going on at my webpage www.akddr.com
that you might want to check out and see if that code helps you with
your problem. the left navbars change the background image of a cell
in a table from one picture to a different one upon mouseover.

if you find these comments to be along the right track, i will look
into a complete solution for you and try to fully answer the question.

---

Clarification of Question by vocaro-ga on 19 Oct 2002 09:20 PDT

> i notice that the flashing affect coincides with the mouse cursor
> changing from a hand (indicating a link) to an arrow (as would be
> normal everywhere except a link). when i move the mouse slowly, i
can
> stop it so that it is still over the image, and yet i have an arrow
> instead of a hand.

That's exactly what I'm experiencing. The question is, why would the
browser ever make the mouse cursor normal? The imagemap clearly
defines the entire area (the purple square) as a hyperlink.

> if there were some way to assure that the mouseover always
referenced a
> link, i would suspect the problem would go away.

Maybe it has something to do with the fact that the overlapping image
has no imagemap. I'll try making the overlapped image also have a
hyperlink; perhaps that would help.

> if i were to offer code that utilized tables but
> provided the desired result, would this be adaquate?

Ah, I didn't think about that workaround. I suppose I could segment
the entire image into tables, but of course this gets increasingly
difficult as the complexity of the imagemap increases. For example,
there would be no way for that technique to duplicate the circular
hyperlinks that imagemaps can make. You'd also have to make sure the
different segments of the images don't have gaps between them.

I'd like to wait and see if anyone can fix the flickering problem, but
if nobody can, then I'll accept your workaround as a valid answer.

It's just really frustrating because it seems like a browser bug to
me, although somehow it affects both Internet Explorer and Mozilla.

> i have some nifty mouseover stuff going on at my webpage
www.akddr.com
> that you might want to check out and see if that code helps you with
> your problem.

Your page doesn't work on Mozilla. The hyperlinks are there, but the
images don't change on mouseover. I need my code to work on both
Internet Explorer and Mozilla.

Trevor

---

Clarification of Question by vocaro-ga on 19 Oct 2002 09:34 PDT

Okay, I tried adding a hyperlink to the overlapping image by simply
adding an HREF tag. The relevant code in
http://vocaro.com/google-question/code-only.html would look like this:

<div id="background">
	<img src="background.png" border="0" usemap="#buttonMap">
	<div id="overlap">
		<a href="dummy.html"> <img src="overlap.png"> </a>
	</div>
</div>

That stops the mouse cursor from changing (it is always a "pointing
hand" above the hyperlink) but the flickering still occurs. This is
looking more and more like a browser bug.

Trevor

---

Request for Question Clarification by sgtcory-ga on 20 Oct 2002 20:21 PDT

Hello,

I got it to work, but I am posting as a clarification to ensure this
is what you were looking for. Here is what I came up with:

You can stop this flicker by assigning a 'blank image map reference'
to any parts of the image you may not be using.

Example - Add this to your image map -

<area shape="rect" coords="80,80,180,180" href="#"
onMouseOver="setVisible('overlap', 'visible')"
onMouseOut="setVisible('overlap', 'hidden')" border="0">

<area shape="rect" coords="60,60,160,160" href="#"
onMouseOver="setVisible('overlap', 'visible')"
onMouseOut="setVisible('overlap', 'hidden')" border="0">

Then add the image map to the overlapping image as well -

<img Src="overlap.Png" Usemap="#buttonmap">

So essentially any parts of the image that you would not want to link
to a page with, would just anchor to the current page. This allows the
layered image area to be in a definitive mouseover state - regardless
of this 'bug'. I do believe this is an issue with IE support for the
CSS standards we are using in conjuction with our Javascript. I could
not verify this, thus the comment before an answer.

I also found a page with a working example for you:
http://www.webreference.com/dhtml/column2/visible.html

Let me know how it works.

SgtCory

---

Clarification of Question by vocaro-ga on 21 Oct 2002 13:55 PDT

SgtCory,

I have modified the code as you suggested and posted it here:
http://vocaro.com/google-question/sgtcory.html

If I understand you correctly, you are suggesting that the portions of
the background image that are not used by the hotspot (the blue areas)
should have an imagemap that points to an empty link. As expected,
this has no effect on the overlapping image. It simply causes the
entire background to become one giant hotspot. This is certainly not
what I'm trying to do.

As for the link you posted, I had already found that document but
rejected it for two reasons. First of all, if you look at what is
going on with the images, you will see that the overlapping image has
the same dimensions as the background image. This means that the
overlapping image will have to take up approximately the same amount
of space and bandwidth as the background image. This is fine for
small, 16-color "web art" graphics as used in the example, but what if
the background image is a photograph, such as a city skyline, which is
complex and cannot be compressed easily even with JPEG. This would
have a big impact on the amount of time needed to download the web
page because you'd need two photographs - one for the unmodified
background and another one for the background with its different
hotspots. I'm trying to find a solution where the hotspot images are
separate, thus avoiding duplication of the background image. Another
reason I can't use the link you posted is that it doesn't seem to work
on Mozilla. Whether this is a problem with the code or is a bug in
Mozilla, I'm not sure.

I will soon be posting a new example that I think will help visualize
the problem I outlined above.

Trevor

---

Request for Question Clarification by sgtcory-ga on 22 Oct 2002 11:58 PDT

Hello vocaro,

You forgot to add the image map to the overlapping image as I stated :

" usemap="#buttonMap" "

Add that to the image overlap.png, so it looks like this in your code:

<img src="overlap.png" usemap="#buttonMap">


It should work fine after that.

Let me know if that was what you were seeking -

Thanks!
SgtCory

---

Request for Question Clarification by sgtcory-ga on 22 Oct 2002 12:03 PDT

You will have image maps areas that link to nowhere, but you will lose
the flicker. As I stated - I think (very unsure) this may have
something to do with a browser bug ( CSS support ) for
position-absolute and position-relative.

To test the above after you add the second image map, mouse over the
lower right hand portion of the image map. No flicker. So you could
hypothetically assign blank anchors to unused parts of the image.

Not the best fix, but better than the flicker. I'll keep my thoughts
open to this as I conduct more research.

SgtCory

---

Clarification of Question by vocaro-ga on 22 Oct 2002 22:32 PDT

> You forgot to add the image map to the overlapping image as I stated
:
> " usemap="#buttonMap" " 

Oops...forgot that part. I added the fix to the code in the link
above, but the result deafeats the whole purpose of having overlapping
images. I think I haven't explained very well what I'm trying to do.

I've set up an example that shows exactly the result I want.
Underneath, it's not very pretty because I'm using the table
workaround suggested by funkywizard. (I had to segment the original
GIF into 19 separate images! Took me two hours.) But at least it
works, which is more than I can say for my DHTML layered-image idea.
The results are shown here:
http://vocaro.com/google-question/visual-aid/index.html

By the way, in case anyone is wondering, those horizontal and vertical
white lines are part of the background image; they're not defects in
the table alignment.

Trevor

The browser is making the mouse cursor normal because you are using
layers with DHTML and not a roll over image such as javascript is
using. With the layers, the bottom layer needs to be gotten too,
otherwise the switch won't work at all. There is no flicker when the
mouse is stable, but when it moves, the layers then switch to the
bottom one, which calls the code to make the top one visible, hence
the flicker as the mouse moves across the image. Remember that the
image is always there, unlike the image in a javascript rollover,
where the image is replaced. It's not a browser limitation or defect
is a limitation of using layers for this type of thing.

Since I don't know of anyway to get around this I'm posting this as a
comment rather than an answer to your question.

Good luck, 

webadept-ga

According to the MSDN page for onmouseover, the event "bubbles", which
means that it "fires when the user moves the mouse pointer over
elements contained by the object."

Onmouseenter supposedly does not bubble, but I couldn't get it to work
in place of onmouseover in your example code, so I'm posting as a
comment only.

MSDN "onmuseenter" entry:
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onmouseenter.asp

> The browser is making the mouse cursor normal because you are using
> layers with DHTML and not a roll over image such as javascript is
> using.

I don't understand this statement. If you look at the code, you will
see I am using JavaScript.

> With the layers, the bottom layer needs to be gotten too,
> otherwise the switch won't work at all.

This does not explain why the first example produces no flicker. It is
using the same overlapping layer technique, so if what you say is
true, the flicker would occur in both examples because only their
coordinates differ. However, the second example is the only one that
produces flicker.

> There is no flicker when the mouse is stable, but when it moves,
> the layers then switch to the bottom one, which calls the code
> to make the top one visible, hence the flicker as the mouse moves
> across the image.

I don't see how this explains what is happening. What would cause the
layers to switch as the mouse moves? Although my code has an event
handler for onMouseOver, this event is sent only when the mouse goes
*into* a region, not across it. If I were responding to onMouseMove,
then I think your explanation might fit. See
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3

> Onmouseenter supposedly does not bubble, but I couldn't get it to
> work in place of onmouseover in your example code, so I'm posting
> as a comment only.

OnMouseOver is a Microsoft-only event and does not work in other
browsers.

Trevor

although i realize that mozilla support is a must for you, I would
like to offer a little consolation to you that even if you don't get
it working the way you want (and therefore works only in internet
explorer), this would not cause a problem for 95% of the people who
use the web. More than 95% of the people who view my webpage use IE,
so I decided a while back that although perfect implementation in
mozilla would be ideal, it was not worth my time.

On a more constructive note, I wanted to discuss a little about the
"whole image size" issue you had. You didn't want the mouseover image
to be the same size as the background for bandwidth reasons, but I was
wondering if your mouseover image is a .gif file. If this is the case,
you could define the areas of the image that are redundant to be
transparent. This method would work for a mouseover image that does
not need to be more than 256 colors, and would not interfere with the
background, despite being as big as it. The additional transparent
area would not use more than a literally few bytes of additional
space, no matter how much physical area it took up.

I couldn't think of much else to help with your problem, so I wish you
best of luck.

> On a more constructive note, I wanted to discuss a little about the
> "whole image size" issue you had. You didn't want the mouseover
image
> to be the same size as the background for bandwidth reasons, but I
was
> wondering if your mouseover image is a .gif file. If this is the
case,
> you could define the areas of the image that are redundant to be
> transparent.

That's a good point; I remember coming across that idea during my
earlier research. Unfortunately there is still the problem of getting
the clipping to work in Mozilla, and I haven't figured out how to do
that yet. And even if it works, it would still be a workaround, not a
true solution like I was hoping for.

Trevor

Taking a look at your website helps understand exactly what you wanted
to do. It looks like a really neat entry page. I'm glad the tables
workaround could be of some help, but I'm sorry you couldn't find a
solution that was what you were looking for.

To get this to work, you'll want to use a technique many refer to as a
glass pane.  Basically you stack three "layers":

bottom layer: backgound image
middle layer: images to show on top of background
top layer: transparent image with image map... basically just use a
1x1 transparent gif that you then resize to the size of the
background.

The reason you get the flickering is that the mouse moves over the
other images, and then is no longer over the region with the image
map.  By moving the image map and all links to the top layer (using
z-indexing), this is no longer an issue.  This will work in mozilla as
well as IE and Opera

For a much more complex working example, check out
http://www.westcoastinternet.net

-Dylan Schiemann

This is quite easy to fix. Problem is, you're calling the onMouseOut
from the background, so when the 'over' image is loaded, the browser
reads this as a mouseOut event, so hides the image again. This done
quickly on repeat causes the flicker. Just get rid of the onMouseOut
from the background and addavent handlers to the 'over' image and all
should be well. Here's the code I updated from your original:

<H2>Update</H2>
<P>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:

<P>
<DIV id=background><IMG src="question_files/background.png"
useMap=#buttonMap3
border=0> 
<DIV id=overlap3><A href="http://vocaro.com/google-question/dummy.html"
onmouseover="setVisible('overlap3', 'visible')"
onmouseout="setVisible('overlap3', 'hidden')">
<IMG src="question_files/overlap.png" border=0> </A></DIV></DIV>
<MAP name=buttonMap3>
<AREA  
      onmouseover="setVisible('overlap3', 'visible')" 
      shape=RECT coords=100,100,200,200 
href="http://vocaro.com/google-question/dummy.html"></MAP></BODY></HTML>

Hope that's of use to you.

Kev

That's it, it works! I've updated the link with your new code. Thanks, Kev!