110072 - onMouseOver/onMouseOut event problems with image maps

Status: RESOLVED FIXED

(Core :: DOM: Events, defect, P3)

Description

[Yakov Markovitch]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.5) Gecko/20011011
BuildID:    2001101117

There are three gray squares on the page with white legends: Computers, ART and *.*
When I point a mouse on any square there appears a menu (which is right) but as
soon as I try to point on any menu item, the menu disappears. In IE5 everything
is OK.

Reproducible: Always
Steps to Reproduce:
1. http://epaperpress.com/index.html
2. Point to any corner of, say, the Computers square - menu appears.
3. Try to point to any menu item.

Actual Results:  Menu immediately disappears (though remains active, i.e. if you
click on appropriate place, you get result).

Comment 1

[Chris Petersen]

Confirming issue in the Nov 14th build (2001-11-14-05).

Comment 2

[Boris Zbarsky [:bzbarsky]]

Events

Comment 3

[Phil Schwartau]

Load the site and look at the "Computers" square. This is a .gif:

         http://epaperpress.com/images/index001_r3_c2.gif

When you mouseover it, the image is swapped dynamically to a more
detailed .gif:

         http://epaperpress.com/images/index001_r3_c2_over.gif

When you mouseout, the image is swapped back to "Computers" again.
At least, that's the way it's supposed to work. However, in Mozilla,
the mouseout event is firing at the wrong time. Try moving your 
mouse until it just touches the lower edge of the "Computers" square.
The mouseover event fires, and you see the detailed .gif. Now move 
your mouse slowly until it just starts to touch the lowest element
in the menu. For some reason, the mouseout event fires! This changes
the image back to "Computers", hence the bug as reported above.

Here is the HTML element involved:


<a href="#"    onMouseOver="MM_swapImage('index001_r3_c2','',
                             'images/index001_r3_c2_over.gif',1);" 
   onMouseOut="MM_swapImgRestore()"  >

   <img name="index001_r3_c2" src="images/index001_r3_c2.gif"
        width="115" height="94" border="0" usemap="#index001_r3_c2Map">
</a>


where the <MAP> element is


<map name="index001_r3_c2Map">
  <area shape="rect" coords="3,61,108,75" href="oper/index.html">
  <area shape="rect" coords="3,47,108,61" href="vbhash/index.html">
  <area shape="rect" coords="3,33,108,47" href="lexandyacc/index.html">
  <area shape="rect" coords="3,19,108,33" href="sortsearch/index.html">
</map>


I have found that if I simply remove the usemap="#index001_r3_c2Map"
from the <IMG> element, the mouseout bug goes away. (Although the links
for the items shown in the detailed .gif now will not work). I will attach 
an example below.

Comment 4

[Phil Schwartau]

Attachment: HTML with "usemap" attribute removed from "Computers" <IMG>

Comment 5

[Phil Schwartau]

Load the attachment, and you will see that the mouseover and mouseout 
events now function perfectly for the "Computers" square. Don't try to
CLICK on any of the items, though - you'll get redirected to
the parent URL again, where nothing works. This is because I have
removed the usemap attribute from the "Computers" <IMG> element.


                          SUMMARY

The bug has something to do with mouseout events getting mixed up
when there is a usemap attribute on an <IMG> inside an anchor.

Note: if you bring up the site in the Mozilla JS Debugger, set a
breakpoint in the function MM_swapImgRestore(). This is the onMouseOut
handler, as shown in the example above.

Comment 6

[gavin long]

*** Bug 111683 has been marked as a duplicate of this bug. ***

Comment 7

[gavin long]

changing summary -> onMouseOver/onMouseOut event problems with image maps,
adding self to cc: list

This bug, and the duplicate bug 111683, only mention mouseOver/mouseOut.

the similar-sounding bug 111659 is describing problems with mouse clicks on
image maps.

Comment 8

[gavin long]

OK, I'm now sure that bug 111659 is NOT related to this bug

While I'm here, this bug is still present, win98SE, 2002010403

Comment 9

[Brian Rozmierski]

Updating 'problem site' - http://www.inspiredorder.com/ (Rollovers at the top
use image maps).

Also still broken in 1.0 Release (Linux x86). Are we still targeting a fix in
mozilla 1.1 alpha?

Comment 10

[Phil Schwartau]

*** Bug 157676 has been marked as a duplicate of this bug. ***

Comment 11

[rjones-bugzilla]

Related to this is the following, written in PHP for brevity.  
1. Execute the script and view the output in Gecko (NS6/Phoenix 0.4)
2. Move the mouse over the squares fairly quickly.
The first time, the onmouseout event does not happen-- the squares stay blue. 
After this they work OK.  
This works OK in IE 5.5



<html>
<head><title></title>
<script type="text/javascript" language="javascript">
function helpfor(i, j, bg, fg)
{
	document.getElementById(i+"_"+j).style.colour=fg;
	document.getElementById(i+"_"+j).style.background=bg;
}
</script>
</head>
<body>
<table>
<?php for($i=0; $i<10; $i++) { ?>
 <tr>
 <?php for($j=0; $j<10; $j++) { ?>
  <td id="<?php print($i."_".$j); ?>" onmouseover="javascript:helpfor(<?php
print($i.",".$j);?>, 'blue', 'white' );" onmouseout="javascript:helpfor(<?php
print($i.",".$j);?>, 'white', 'black' );"><?php print($i.$j);?></td>
 <?php } ?>
 </tr>
<?php } ?>
</table>
</body>
</html>

Comment 12

[Kirk Brocas]

Can anyone confirm that this bug is the cause of the following image map not
working.

http://www.i7.aol.com.au/
On left hand side (Choose A Site)

This image map consists of a table contating <img> entries using
onmouseover="showMenu(event)" 

The mouse over does not display at all. It does with IE, and works partially
with Netscape Communicator 4.8.

I suspect that it is caused by this bug - could you please confirm. If not, I
will log a new bug.

When is this issue going to be addressed - I come across many sites that exhibit
this problem and are non-functional - only work with IE.

I also believe severity and priority should be bumped up as this issue causes
problems on many sites, some sites being inoperable as they only use image map
with mouse over as the interface.

My browser : Mozilla 1.2 build 2002111715

Comment 13

[Phil Schwartau]

Reassigning to new default owner of this component; cc'ing jst, jkeiser.
I hope we can expedite this one, it's been waiting a long time for a fix -

Comment 14

[saari (gone)]

yeah, this should get fixed soon. ->bryner

Comment 15

[Vladimir Ermakov]

#11 is a dupe of 130620

Comment 16

[Vladimir Ermakov]

The testcase site has been changed, and is no longer showing the wrong
behaviour... does anyone know of another site that shows the problem?

Comment 17

[Kirk Brocas]

Try http://www.microsoft.com/
The menus across the top do not drop down with Mozilla. Looking at the page code
it is img mouseover event, so I suspect this is the same problem.

Comment 18

[John Keiser (jkeiser)]

Excellent catch, but it's a mouseover on a text element, not an image ... that's
not this bug.  That is bug 103055.  It may be that that is the cause of the
image bug as well.

Comment 19

[Vladimir Ermakov]

Yeah, Microsoft site is definately not this bug. It appears that the source code
on Netscape is different then on IE6, and is not even suppose to show popups...

Comment 20

[John Keiser (jkeiser)]

I cannot find a testcase that fails here, so I cannot test the fix.  Testcase
needed.

Comment 21

[John Keiser (jkeiser)]

Attachment: Testcase That Does Not Fail

From what the other testcase looked like, it was expecting no mouseout on img,
but this testcase shows that on both IE and Moz, mouseout happens when you go
from the parent into the child.

Comment 22

[Vladimir Ermakov]

Attachment: Testcase that Fails (has usemap)

Mouse over the images in the middle many times, and watch them swap. The bug is
that they dont always swap. When there is no usemap they swap all the time, and
very fast.

Comment 23

[Vladimir Ermakov]

Attachment: same testcase that does not fail (no usemap)

This test quickly swaps the images, and does it consistently

Comment 24

[Vladimir Ermakov]

The bug still exists. Please coment if you see any sites that use this
behaviour. I will raise the priority.

Comment 25

[Vladimir Ermakov]

*** Bug 186847 has been marked as a duplicate of this bug. ***

Comment 26

[Vladimir Ermakov]

Links from a dupe where this occurs
http://academic.brooklyn.cuny.edu/geology/leveson/core/linksa/geologic_maps/bedrock_rollover3/bedrock_rollover3.html
http://www.arnb.org/phnynj.html?phnynjusamap
http://www.negia.net/~watkumc/Rollover.html 

Comment 27

[rnorberg]

Attachment: image to be mapped

Comment 28

[rnorberg]

Attachment: testcase image map

mouseover image map does not show link on status line:
Recreated this defect on win2k mozilla 2003010608.
testcase is an html page with a mapped image(large rectangle, with cirlce,
and square within it).	each shape should return a different link as you 
move the the mouse it.	the link should display on the status line at 
the bottom of the browser.
testcase files BrwTestHTMLImageMap.html, BrwTestHTMLImage.gif

Comment 29

[[e-mail]]

*** Bug 189529 has been marked as a duplicate of this bug. ***

Comment 30

[[e-mail]]

http://bugzilla.mozilla.org/show_bug.cgi?id=189529 should be a dupe of this, as
noted above.

that bug might be of interest. in 1.2.1 I do not have the problem described in
the bug, but in recent nightlies I do. so at some point "my" specific problem
was fixed.

Comment 31

[[e-mail] (gone - use [e-mail] instead)]

This breaks Netscape.com's left navigation panel feedback for channels.

Comment 32

[Vladimir Ermakov]

*** Bug 190027 has been marked as a duplicate of this bug. ***

Comment 33

[[e-mail]]

I'd still desire some clafification on the issue I noted above.

"My" specific bug was fixed at one point, around 1.2.1, but this bug doesn't
seem to have ever been fixed, and has been opened since before 1.2.1.

Comment 34

[Marek Stępień [:marcoos, inactive]]

Probably the same (or similar) problem:
http://www.ralphm.net/map?mapname=poland

(When you hover a bulb icon on the map a <div> containing some
information about the user should appear - but it does not in 1.3b nightlies).

This website used to work with Mozilla 1.2.1, 1.3alpha and Netscape 7.0.
Now it does not work with Mozilla and Phoenix nightlies...

Comment 35

[Zook Valem]

Just happen to rediscover this bug after modifying my company's website.  The
strange thing is the mouseover and mouseout events does work in recent fall
and/or recent summer.  But today, I discovered that it doesn't work.

The two testcases on the date of 12-17-2002, I'm not certain if it is working
right because the code is very lengthly and the images is resized due to the
width and height attribute.  Fortunately, I had been updating my company website
so I copied some of the code and modify it for a new testcase to this bug
report.  The code is very short and simple which would help to move this project
along.  As for the testcase on the date of 01-07-2003, it's not working.

This bug is not an issue for Netscape 7.01, by the way, Netscape 7.01 is based
on Mozilla 1.0.2.  As for Mozilla Build #2003-01-28, this bug still exist....

Comment 36

[Zook Valem]

Attachment: Cleaner coding for this testcase....

Cleaner coding for this testcase....  Just do the mouseover over any of the 3
red dinosaur....  This is the one that don't work with the latest Moz build...

Comment 37

[Michael Buckland]

Susie has sent email asking that this be considered soon and taken.

Comment 38

[John Keiser (jkeiser)]

It is fixed with bug 185889.  (That patch is not checked in yet.)

Comment 39

[John Keiser (jkeiser)]

*** Bug 193167 has been marked as a duplicate of this bug. ***

Comment 40

[John Keiser (jkeiser)]

Fixed with bug 185889/103055.

Comment 41

[R.K.Aa.]

*** Bug 193844 has been marked as a duplicate of this bug. ***

Comment 42

[John Keiser (jkeiser)]

*** Bug 194420 has been marked as a duplicate of this bug. ***

Comment 43

[John Keiser (jkeiser)]

*** Bug 193104 has been marked as a duplicate of this bug. ***

Comment 44

[John Keiser (jkeiser)]

*** Bug 196155 has been marked as a duplicate of this bug. ***