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

K

Koh

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">
<!--
function swapImage(category)
{
document.getElementById('category').src = eval(category + ".src");
}

FrozenFoodOMO = new Image();
FrozenFoodOMO.src = "FrozenFoodOMO.gif";
FreshFoodOMO = new Image();
FreshFoodOMO.src = "FreshFoodOMO.gif";
BeveragesOMO = new Image();
BeveragesOMO.src = "BeveragesOMO.gif";
HomeHealthOMO = new Image();
HomeHealthOMO.src = "HomeHealthOMO.gif";
PetFoodOMO = new Image();
PetFoodOMO.src = "PetFoodOMO.gif";

-->
</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>
 
K

Koh

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");
}
 
T

Thomas 'PointedEars' Lahn

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top