Rollover image work in Netscape 7 but not work in Internet Explorer 6

Koh · Apr 28, 2004

My rollover image effect work fine in Netscape but not in Internet
Explorer. Is there any important element or tag that I have miss out
so it is not working in Internet Explorer? Below is my code, hope
there is someone can help me. Thank you.

<html>
<head>
<title>List of Products</title>
<script language="JavaScript">

</script>
</head>
<body>
<map name="category">
<area shape="rect" coords="0,0,76,60" href="frozen_food.html"
onmouseover="swapImage('FrozenFoodOMO')" target="frame_2">
<area shape="rect" coords="94,0,170,60" href="fresh_food.html"
onmouseover="swapImage('FreshFoodOMO')" target="frame_2">
<area shape="rect" coords="192,0,302,60" href="beverages.html"
onmouseover="swapImage('BeveragesOMO')" target="frame_2">
<area shape="rect" coords="320,0,400,60" href="home_health.html"
onmouseover="swapImage('HomeHealthOMO')" target="frame_2">
<area shape="rect" coords="416,0,495,60" href="pet_food.html"
onmouseover="swapImage('PetFoodOMO')" target="frame_2">
</map>
<img src="Category.gif" id="category" border="0" usemap="#category"
style="position: absolute; top: 0px; left: 0px;">
</body>
</html>

Koh · Apr 29, 2004

I know which part when wrong. In the img element, I used "category" as
the value for the ID field. This value is conflict with the parameter
name that I used on the swapImage function. Therefore I think the IE
evaluate the category variable in
document.getElementById('category').src, which result failing to
locate the img element. I don't know why Netscape work, but after I
change the conflict value, it work on both browser. Thanks for those
who had help.

<img src="Category.gif" id="category" border="0" usemap="#category"
style="position: absolute; top: 0px; left: 0px;">

function swapImage(category)
{
document.getElementById('category').src = eval(category + ".src");
}

Thomas 'PointedEars' Lahn · May 11, 2004

Koh said:
<img src="Category.gif" id="category" border="0" usemap="#category"
style="position: absolute; top: 0px; left: 0px;">

function swapImage(category)
{
document.getElementById('category').src = eval(category + ".src");
}

eval() is nonsense here (see the FAQ), and the script is
not downwards compatible as well as error-prone. Write

JavaScript:

var HomeHealthOMO = new Image();
HomeHealthOMO.src = ...;
// ...

function swapImage(oCategory)
{
var imgs = null, cat = null, cat2 = null;
if ((imgs = document.images)
&& (imgCat = imgs['category'])
&& imgCat.src
&& oCategory
&& oCategory.src)
{
imgCat.src = oCategory.src;
}
}

HTML:

<area ... onmouseover="swapImage(HomeHealthOMO)" ...>

or have a look at said:
[Top post]

Please do not do that, see <http://netmeister.org/news/learn2quote.html>
and the FAQ.

PointedEars

When draggable=false & draggable=true dont work ?	1	Jan 14, 2023
image map, javascript	9	Jun 19, 2009
An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
What is the error in this code , file not fetch and not fetched in the basemap, not vissible in the browser	1	Jul 26, 2023
need help on image map	2	Apr 16, 2005
Need debugger to help me	8	Apr 1, 2005
onmouseover javascript for image map areas	4	Dec 21, 2006
need help on highlighting image map area	1	Apr 16, 2005

Rollover image work in Netscape 7 but not work in Internet Explorer 6

Koh

Koh

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads