Image rollover help

Dashsa · Feb 8, 2008

Hello,
I am trying to create a gallery that uses image rollover.
I have the basics set up but when the mouse goes over the small image it fails.
I am sure its a simple error-
Below is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = 'Images\stair\MMCStair2.jpg';
image1.src = 'Images\stair\MMCStair3.jpg';
image2.src = 'Images\stair\MMCStair4.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
} 
</script> 	
	<title> </title>
		</head>
<body background="Images/bg.jpg" style="background-repeat:no-repeat">
		<div id="header">
	<img src="Images/Banner.jpg" />
		</div>
					
<div id="MenuText">
<a href="index.html">HOME</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a href="Gallery.html">GALLERIES</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="ContactUs.html">CONTACT</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="Jobs.html">JOB OPPORTUNITIES</a>&nbsp;&nbsp;&nbsp;
<a href="Links.html">LINKS PAGE</a>

</div>
<div id="pNumber">
Phone: xxxxxx
</div>


<div id="gallery" align="center">
<p align="center"><img src="Images\Special\MMCSpec2.jpg" width="150" height="150" border="0" name="rollimg" /></p> 

<br /><br />
<center>

<p align="center">
<span onmouseover="document.rollimg.src=image0.src;">
<img src="Images\stair\MMCStair1.jpg" width="32" height="32" border="0" alt="1" /></span> 

			<span onmouseover="document.rollimg.src=image1.src;">
			<img src="Images\stair\MMCStair2.jpg"width="32" height="32" border="0" alt="2" />
			</span>

<span onmouseover="document.rollimg.src=image2.src;">
<img src="Images\stair\MMCStair3.jpg"" width="32" height="32" border="0" alt="3" />
</span>

</p>

<br clear="all" /> <a href="Gallery.html"><font style="color:#ffcc66">back to GALLERY</font></a>
</center>
</div>
				
			</body>
</html>

Thanks
D

kaht · Feb 8, 2008

I'm guessing you got that script from here?

http://www.felgall.com/jstip15.htm

That script looks very old, and it's definitely not written with cross-browser compatibility in mind. Personally, I'd find another one or just write one yourself. It's not a complicated concept, so you could likely find tutorials all over the net if you opted to write it yourself.

I have the basics set up but when the mouse goes over the small image it fails.

Umm..... which image is the small image?
What do you mean it fails?
Are you getting an error, or is it just doing nothing?
If you're getting an error, what is it?

Unfortunately I left my crystal ball at home today....

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

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!

Image rollover help

Dashsa

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor