Table bgcolor onMouseOver

liunx

Guest
how do i make it so that when someone puts there mouse over the table its bgcolor will change?<!--content-->IE and maybe Netscrap 6. Netscrap 4.x -- not a chance:<br />
<br />
<table style="background-color:blue" onMouseover=this.style.backgroundColor='red'" onMouseout="this.style.backgroundColor='blue'"><!--content-->...not a chance...<br />
<br />
<html><br />
<head><br />
</head><br />
<body onload="if (document.all)demo.onmouseout()"><br />
<layer width="200" height="200" bgcolor="red" <br />
onmouseover="this.bgColor='green'" <br />
onmouseout="this.bgColor='red'"><br />
<table id="demo" width="200" height="200" cellspacing="0" cellpadding="0" border="2" <br />
onmouseover="this.style.background='green'" <br />
onmouseout="this.style.background='red'"><br />
<tr><br />
<td width="100" height="100"><br></td><td width="100" height="100"><br></td></tr><br />
<tr><br />
<td width="100" height="100"><br></td><td width="100" height="100"><br></td></tr><br />
</table><br />
</layer><br />
</body><br />
</html><!--content-->For mouseing over something like a navigation button which is an image, you would need two images right in the same file?<br />
<br />
Say a Blue button and mouse over turns into a red button, is this correct?<br />
<br />
Thanks<!--content-->You woulsn't put two images in the same file. Make two separate images that you would like to make a rollover out of. Then, save them as separate files. The following code works on IE 6.0 (not sure of anything else):<br />
<br />
<html><br />
<br />
<head><br />
<br />
<script language="javascript1.1"><br />
<!--<br />
<br />
/*Code generated by the onMouseover whipper<br />
Visit <!-- m --><a class="postlink" href="http://javascriptkit.com">http://javascriptkit.com</a><!-- m --> for more info*/<br />
<br />
b813=new Image(150,25)<br />
b813.src=http://www.htmlforums.com/archive/index.php/"Image1.gif"<br />
b874=new Image(150,25)<br />
b874.src=http://www.htmlforums.com/archive/index.php/"Image1a.gif"<br />
<br />
//--><br />
</script><br />
<br />
<script><br />
<!--<br />
function filter(imagename,objectsrc){<br />
if (document.images)<br />
document.images[imagename].src=http://www.htmlforums.com/archive/index.php/eval(objectsrc+".src")<br />
}<br />
//--><br />
</script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<div align="left"><br />
<table border="1" cellpadding="0" cellspacing="0" width="150" bordercolorlight="#000000" bordercolordark="#000000" bordercolor="#000000"><br />
<tr><br />
<td><br />
<a href=http://www.htmlforums.com/archive/index.php/"yoururl.html" onmouseover="filter('b78','b874')" onmouseout="filter('b78','b813')"><br />
<img src=http://www.htmlforums.com/archive/index.php/"Image1.gif" name="b78" border="0" width="150" height="25"></a></td><br />
</tr><br />
</table><br />
</div><br />
<br />
</body><br />
<br />
</html><br />
<br />
Just change the image names that are labeled B813 and B874 to the image names that you would like to use.<br />
<br />
Change the URL in the table to the URL that you would like it to lead to.<br />
<br />
Good luck. And, if you need any help adding more than one rollover (such as a whole menu), just let me know.<!--content-->
 
Back
Top