469,903 Members | 1,603 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,903 developers. It's quick & easy.

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

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>
Jul 23 '05 #1
2 1830
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");
}

de********@yahoo.com (Koh) wrote in message news:<70**************************@posting.google. com>...
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>

Jul 23 '05 #2
Koh wrote:
<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 <http://pointedears.de.vu/scripts/test/hoverMe/> instead.
[Top post]


Please do not do that, see <http://netmeister.org/news/learn2quote.html>
and the FAQ.
PointedEars
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Brian Angliss | last post: by
3 posts views Thread by Max Biancofiore | last post: by
1 post views Thread by John | last post: by
3 posts views Thread by Becky Carter Hickman-Jones | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.