I've tried every possible way I know to use to get my OnMouseOver & OnMouseOut rollovers to work in netscape, but nothing will work. My page is not being cached, I put in the script to stop that, but the rollovers just won't work no matter what I try. Any advice anyone has would be greatly appreciated. [sig][/sig]
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How can I make my rollovers work in Netscape?
- Thread starter ID10T16
- Start date
What does your code look like? It's easier to answer your question if we can look at your code and make corrections.
Anyway, a couple of suggestions:
- Make sure you cache your images when the document loads:
var img1=new Image();
img1.src="myimage.gif";
- Refer to the images in a portable way:
document.images['img_name'].src=img1.src;
Regards, [sig]<p>Russ<br><a href=mailto:bobbitts@hotmail.com>bobbitts@hotmail.com</a><br><a href= is in</a><br>[/sig]
Anyway, a couple of suggestions:
- Make sure you cache your images when the document loads:
var img1=new Image();
img1.src="myimage.gif";
- Refer to the images in a portable way:
document.images['img_name'].src=img1.src;
Regards, [sig]<p>Russ<br><a href=mailto:bobbitts@hotmail.com>bobbitts@hotmail.com</a><br><a href= is in</a><br>[/sig]
- Thread starter
- #3
I apologize for not including my script b4. The whole page looks like this :
<html>
<head><title>Test Page
</title>
<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
<Script Language="JavaScript">
img1 = new Image();
img1.src = "Info.gif";
img2 = new Image();
img2.src = "Info2U.gif";
img3 = new Image();
img3.src = "Contacts.gif";
img4 = new Image();
img4.src = "Contacts2U.gif";
img5 = new Image();
img5.src = "Facts.gif";
img6 = new Image();
img6.src = "Facts2U.gif";
img7 = new Image();
img7.src = "Home.gif";
img8 = new Image();
img8.src = "Home2U.gif";
</Script>
</head>
<body>
<br/>
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr><td><img src="Top.gif" width="150" height="50"></td></tr>
<tr><td height="70"><a href="#" onMouseOver = "document.images[2].src='Info2U.gif'"
onMouseOut = "document.images[1].src='Info.gif'">
<img src="Info.gif"border="0" width="150" height="75"></a></td></tr>
<tr><td height="70"><a href="#" onMouseOver = "document.images[4].src='Contacts2U.gif'"
onMouseOut = "document.images[3].src='Contacts.gif'">
<img src="Contacts.gif"border="0" width="150" height="75"></a></tr></td>
<tr><td height="70"><a href="#" onMouseOver = "document.images[6].src='Facts2U.gif'"
onMouseOut = "document.images[5].src='Facts.gif'">
<img src="Facts.gif"border="0" width="150" height="75"></a></tr></td>
<tr><td height="70"><a href="#" onMouseOver = "document.images[8].src='Home2U.gif'"
onMouseOut = "document.images[7].src='Home.gif'">
<img src="Home.gif"border="0" width="150" height="75"></a></tr></td>
<tr><td height="50"><img src="Bottom.gif" width="150" height="50"></td></tr>
</table>
</body>
</html>
:
Now my current problem is this. The rollovers work, problem though. It changes the image in the table cell below it. I have NO clue what is going on. This script worked great in IE, but not in netscape. If anyone knows anything that can help me, please offer whatever you can. It would be greatly appreciated.
Thanx,
Daniel Leger
[sig][/sig]
<html>
<head><title>Test Page
</title>
<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
<Script Language="JavaScript">
img1 = new Image();
img1.src = "Info.gif";
img2 = new Image();
img2.src = "Info2U.gif";
img3 = new Image();
img3.src = "Contacts.gif";
img4 = new Image();
img4.src = "Contacts2U.gif";
img5 = new Image();
img5.src = "Facts.gif";
img6 = new Image();
img6.src = "Facts2U.gif";
img7 = new Image();
img7.src = "Home.gif";
img8 = new Image();
img8.src = "Home2U.gif";
</Script>
</head>
<body>
<br/>
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr><td><img src="Top.gif" width="150" height="50"></td></tr>
<tr><td height="70"><a href="#" onMouseOver = "document.images[2].src='Info2U.gif'"
onMouseOut = "document.images[1].src='Info.gif'">
<img src="Info.gif"border="0" width="150" height="75"></a></td></tr>
<tr><td height="70"><a href="#" onMouseOver = "document.images[4].src='Contacts2U.gif'"
onMouseOut = "document.images[3].src='Contacts.gif'">
<img src="Contacts.gif"border="0" width="150" height="75"></a></tr></td>
<tr><td height="70"><a href="#" onMouseOver = "document.images[6].src='Facts2U.gif'"
onMouseOut = "document.images[5].src='Facts.gif'">
<img src="Facts.gif"border="0" width="150" height="75"></a></tr></td>
<tr><td height="70"><a href="#" onMouseOver = "document.images[8].src='Home2U.gif'"
onMouseOut = "document.images[7].src='Home.gif'">
<img src="Home.gif"border="0" width="150" height="75"></a></tr></td>
<tr><td height="50"><img src="Bottom.gif" width="150" height="50"></td></tr>
</table>
</body>
</html>
:
Now my current problem is this. The rollovers work, problem though. It changes the image in the table cell below it. I have NO clue what is going on. This script worked great in IE, but not in netscape. If anyone knows anything that can help me, please offer whatever you can. It would be greatly appreciated.
Thanx,
Daniel Leger
[sig][/sig]
Netcape needs to be perfect on table structures, IE guesses well, remember this, it fixes many problems ::
="75"></a></tr></td>
You should close cell before the table row
="75"></a></td></tr> [This is how it should be]
This occurs several times in included script. [sig][/sig]
="75"></a></tr></td>
You should close cell before the table row
="75"></a></td></tr> [This is how it should be]
This occurs several times in included script. [sig][/sig]
Looks to me like you're using the wrong subscripts when referring to your images in the mouseover/mouseout code.
Your image 'top.gif' is document.images[0].
Then for each table row the reference (for both mouseover and mouseout) is:-
document.images[1] for row 1,
document.images[2] for row 2 etc.
NB this assumes that there are no other images between these references.
Basically count each image down the page (starting from 0) to identify the correct subscript.
That ought to sort it. [sig][/sig]
Your image 'top.gif' is document.images[0].
Then for each table row the reference (for both mouseover and mouseout) is:-
document.images[1] for row 1,
document.images[2] for row 2 etc.
NB this assumes that there are no other images between these references.
Basically count each image down the page (starting from 0) to identify the correct subscript.
That ought to sort it. [sig][/sig]
- Status
Similar threads
- Locked
- Question