HTML Forum

**cj-real** · 11-22-2007, 01:16 PM

Hi,

I coded this, so when you rollover, the cell background changes, rather than making 2 different menu images for each one. Saves time and bandwidth... but I tried to repeat the code in more than 1 cell and it's not working.

Here is my code (jscript and css in same file)

HTML Code:

<html> 
<head> 
<title>Change Test</title> 
<style type="text/css"> 
td.image { 
background: url(http://cjnet.info/images/bg/1.gif); 
} 
td.image2 { 
background: url(http://cjnet.info/images/bg/2.gif); 
}
a:link {
 color: #FFFFFF;
}
</style> 
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
  pic1= new Image(100,25); 
  pic1.src="http://cjnet.info/images/bg/1.gif"; 
  pic2= new Image(240,55); 
  pic2.src="http://cjnet.info/images/bg/2.gif"; 
}
//-->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body> 
<table width="100" height="43"> 
<tr> 
<td height="37" id="changebg" name="changebg" background="http://cjnet.info/images/bg/1.gif" bgcolor="#009933"> 
<a href="#" onMouseOver="changebg.className='image2'" onMouseOut="changebg.className='image'">Change</a></td> 
</tr> 
</table> 
</body> 
</html>

and this is the page where it works (on 1 cell only);
http://cjnet.info/pages/projects/

**chrishirst** · 02:00 PM

You have a space in front of the classname in the event call and there can be only ONE element with any particular ID

**tripy** · 11-22-2007, 02:22 PM

Try to replace

HTML Code:

onMouseOver="changebg.className='image2'"

with

HTML Code:

onMouseOver="this.className='image2'"

This should remove the problem of conflicting id's, and you could even remove the name attribute.

**cj-real** · 11-23-2007, 06:45 AM

Quote:

Originally Posted by chrishirst

You have a space in front of the classname in the event call and there can be only ONE element with any particular ID

so what do I do about it.

and changing the "changebg." to "this." does not work becuase it cannot run will the cell

**cj-real** · 11-23-2007, 07:09 AM

Finished it, changed code to

HTML Code:

<html> 
<head> 
<title>Change Test</title> 
<style type="text/css"> 
td.image { 
background: url(http://cjnet.info/images/bg/1.gif); 
} 
td.image2 { 
background: url(http://cjnet.info/images/bg/2.gif); 
}
a:link {
 color: #FFFFFF;
}
</style> 
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
  pic1= new Image(100,25); 
  pic1.src="http://cjnet.info/images/bg/1.gif"; 
  pic2= new Image(240,55); 
  pic2.src="http://cjnet.info/images/bg/2.gif"; 
}
//-->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body> 
<table width="100" height="43"> 
<tr> 
<td height="37" id="changebg" name="changebg" background="http://cjnet.info/images/bg/1.gif" bgcolor="#009933"> 
<a href="#" onMouseOver="changebg.className='image2'" onMouseOut="changebg.className='image'">Change</a></td> 
</tr> 
<tr> 
<td height="37" id="changebg1" name="changebg1" background="http://cjnet.info/images/bg/1.gif" bgcolor="#009933"> 
<a href="#" onMouseOver="changebg1.className='image2'" onMouseOut="changebg1.className='image'">Change</a></td> 
</tr> 
</table> 
</body> 
</html>

Elements now have different names and will do for each cell.

**chrishirst** · 02:54 AM

HTML Code:

<html> 
<head> 
<title>Change Test</title> 
<style type="text/css"> 
td.image { 
background-image: url(images/1.gif);
 
} 
td.image2 { 
background-image: url(images/2.gif); 
}
a:link {
 color: #FFFFFF;
}
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body> 
<table width="100" height="43"> 
<tr> 
<td height="37" class="image" onMouseOver="this.className='image2'" onMouseOut="this.className='image'"> 
<a href="#" >Change</a></td> 
<td height="37" class="image" onMouseOver="this.className='image2'" onMouseOut="this.className='image'"> 
<a href="#" >Change</a></td> 
<td height="37" class="image" onMouseOver="this.className='image2'" onMouseOut="this.className='image'"> 
<a href="#" >Change</a></td> 
<td height="37" class="image" onMouseOver="this.className='image2'" onMouseOut="this.className='image'"> 
<a href="#" >Change</a></td> 
</tr> 
</table> 
</body> 
</html>

www.candsdesign.co.uk/demo/wt/cells/

**cj-real** · 11-23-2007, 09:18 AM

......?

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!