Open Bug 266210 Opened 20 years ago Updated 2 years ago

Javascript image swap onmouseover/out replaces referencing by src, not name

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Linux
Type:
defect

Tracking

()

People

(Reporter: james, Unassigned)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.3) Gecko/20041016 Firefox/1.0
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.3) Gecko/20041016 Firefox/1.0

Onmouseover navigation menu, triggered by top-layered transparent images, swaps
correctly for cached src file, where each src file has a unique name
(homein.gif, homeout.gif, etc.). Onmouseout in the same menu, swaps all images
in the menu, not just the unique-named image as intended, where there is a
common src file (fadeout.gif, for example).

Works as expected with Mozilla 1.2.1 and (apparently) MSIE on Win platform. See
http://www.webmasterworld.com/forum91/2606.htm for forum discussion about this.

Reproducible: Always
Steps to Reproduce:
1. Using FF1.0+, go to test URI.
2. After page load, roll mouse over one item ("home") in left side navigation menu.
3. Roll mouse out of the one item ("home") in left side navigation menu.

Actual Results:  
1. Successfully navigated to test URI.
2. "home" button successfully swapped src for correct mouseover src image.
3. All buttons swapped for the common swap src file. 

Expected Results:  
1. Successfully navigated to test URI.
2. "home" button successfully swapped src for correct mouseover src image.
3. "home" button successfully swapped src for correct mouseout src image.


No crashing, default theme, just Javascript behaviour as above. Source code
clearly reveals simple script/DOM structure.
This testpage demonstrates the bug.
With on.gif and off.gif non-animated gifs, it works as expected.
With off.gif an animated gif, ALL images are reloaded on mouseout.


Testpage:
<html>
<head>
<title></title>
<script type="text/javascript">
function Swap(id, state) {
	document.getElementById(id).src = state ? 'on.gif' : 'off.gif';
}
</script>
</head>
<body>

<img id="img1" src="off.gif" onmouseover="Swap('img1',1)"
onmouseout="Swap('img1',0)">
<img id="img2" src="off.gif" onmouseover="Swap('img2',1)"
onmouseout="Swap('img2',0)">
<img id="img3" src="off.gif" onmouseover="Swap('img3',1)"
onmouseout="Swap('img3',0)">

</body>
</html>
I also can reproduce this bug with Mozilla 1.8a6 Gecko/20050111.
Very annoying bug. I would like to see it solved soon
Assignee: bross2 → nobody
Very annoying indeed. A workaround is to have a bunch of numbered copy's of the same image for each spot its used.  If you can't do that because the number is not finite (as was the case for me), you can append "#' + Math.random()" to the image source in the script.  The server ignores the extra info.. but the browser treats it as a seperate image.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.