rollovers don't work in IE! please help

AliasJaneDoe · #1 11-07-2009, 08:55 PM

My galley tests out fine in Firefox and Netscape, but I just tried it in IE and my rollovers do nothing. Can anybody help me? Also, is there anybody on a Mac who would know if this would work in Safari?

Here's my code. The thumbsnails change a main image in another frame when mouseovered (or at least they're supposed to).

Code:

<html><head>


<script language="JavaScript">


if (navigator.appVersion.indexOf("2.") != -1){

        check = false;

        }

if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){

        check = false;

        }

else {

        check = true;

        }

image1= new Image();

image1.src = "thumbs/cell1off.jpg";

image1on = new Image();

image1on.src = "thumbs/cell1.jpg";

image1alt = new Image();

image1alt.src = "images/main1.jpg";

image1alton = new Image();

image1alton.src = "images/main1.jpg";


image2= new Image();

image2.src = "thumbs/cell2off.jpg";

image2on = new Image();

image2on.src = "thumbs/cell2.jpg";

image2alt = new Image();

image2alt.src = "images/main2.jpg";

image2alton = new Image();

image2alton.src = "images/main2.jpg";


image3= new Image();

image3.src = "thumbs/cell3off.jpg";

image3on = new Image();

image3on.src = "thumbs/cell3.jpg";

image3alt = new Image();

image3alt.src = "images/main3.jpg";

image3alton = new Image();

image3alton.src = "images/main3.jpg";




image4= new Image();

image4.src = "thumbs/cell4off.jpg";

image4on = new Image();

image4on.src = "thumbs/cell4.jpg";

image4alt = new Image();

image4alt.src = "images/main4.jpg";

image4alton = new Image();

image4alton.src = "images/main4.jpg";




image5= new Image();

image5.src = "thumbs/cell5off.jpg";

image5on = new Image();

image5on.src = "thumbs/cell5.jpg";

image5alt = new Image();

image5alt.src = "images/main5.jpg";

image5alton = new Image();

image5alton.src = "thumbs/main5.jpg";


image6= new Image();

image6.src = "thumbs/cell6off.jpg";

image6on = new Image();

image6on.src = "thumbs/cell6.jpg";

image6alt = new Image();

image6alt.src = "images/main6.jpg";

image6alton = new Image();

image6alton.src = "images/main6.jpg";


image7= new Image();

image7.src = "thumbs/cell7off.jpg";

image7on = new Image();

image7on.src = "thumbs/cell7.jpg";

image7alt = new Image();

image7alt.src = "images/main7.jpg";

image7alton = new Image();

image7alton.src = "images/main7.jpg";


image8= new Image();

image8.src = "thumbs/cell8off.jpg";

image8on = new Image();

image8on.src = "thumbs/cell8.jpg";

image8alt = new Image();

image8alt.src = "images/main8.jpg";

image8alton = new Image();

image8alton.src = "images/main8.jpg";





function imageon(name)   {

	document[name].src = eval(name + "on.src");

	parent.parent.image.document["altimg"].src = eval(name + "alton.src");

}

function imageoff(name)  {

	document[name].src = eval(name + ".src");

	parent.parent.image.document["altimg"].src = eval(name + "alt.src");

}

NN3 = true;



function on(name)  {

	if (check == true){

		imageon(name);}

}

function off(name)  {

	if (check == true){

		imageoff(name);}

}

// -->

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>



<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF" marginheight="0" marginwidth="0">

<HR NOSHADE SIZE=1 width=100%>      



<TABLE cellSpacing=0 cellPadding=0 border=0>
    <TR>


	<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>
<TD> 
<img onclick="doSomething();" style="cursor:pointer;" onmouseover="on('image1');" onmouseout="off('image1')" src="thumbs/cell1off.jpg"  border="0" name="image1"></a>
<BR>

<a target="_blank" href="pages/2.html" onmouseover="on('image2');" onmouseout="off('image2')"><img src="thumbs/cell2off.jpg" target="image" border="0" name="image2"></a>
</TD>


<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>
<TD> 
<img onclick="doSomething();" style="cursor:pointer;" onmouseover="on('image3');" onmouseout="off('image3')" src="thumbs/cell3off.jpg"  border="0" name="image3"></a>
<BR>

<a target="image" href="YOUR LINK" onmouseover="on('image4');" onmouseout="off('image4')"><img src="thumbs/cell4off.jpg"  border="0" name="image4"></a>
</TD>


<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>
<TD>  
<a target="image" href="YOUR LINK" onmouseover="on('image6');" onmouseout="off('image6')"><img src="thumbs/cell6off.jpg"  border="0" name="image6"></a>
<BR>

<a target="image" href="YOUR LINK" onmouseover="on('image7');" onmouseout="off('image7')"><img src="thumbs/cell7off.jpg"  border="0" name="image7"></a>
</TD>

		
<TD width=3> <IMG height=25 src="images/white.jpg" width=3> </TD>

</TR></TABLE>





</body></html>

**Kor** · #2 11-09-2009, 04:21 AM

You have some HTML errors (end tags which close nothing, no Doctype is present, script deprecated language attribute instead of type, deprecated or even unsupported HTML attributes instead of CSS presentation) and your rollover code is medieval. I wonder where you have found a Netscape to check the code. As far as I know probably no one uses Netscape these days.

Improve your HTML and javascript knowledge. And learn CSS (there are ways to cretae rollover effect on using CSS only)

http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/js/default.asp

AliasJaneDoe · #3 11-09-2009, 04:43 AM

Quote:

and your rollover code is medieval

Can you point me in the direction of one that's more up to date? Something that changes both thumbnails and a single alternate image. I will look at your links also, however. Thanks.

**Kor** · #4 11-09-2009, 05:03 AM

There are many ways to write a javascript rollover code. Here's a simple variant. Suppose your rolloff images are "something.jpg" and your rollon images are "something_on.jpg":

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function on(img){
img.src=img.src.replace(/\.jpg/,'_on.jpg');
}
function off(img){
img.src=img.src.replace(/_on\.jpg/,'.jpg');
}
</script>
</head>
<body>
<div>
<img src="00.jpg" alt="" width="73" height="100" onmouseover="on(this)" onmouseout="off(this)">
<img src="01.jpg" alt="" width="73" height="100" onmouseover="on(this)" onmouseout="off(this)">
<img src="02.jpg" alt="" width="73" height="100" onmouseover="on(this)" onmouseout="off(this)">
</div>
</body>
</html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)