rollovers in tables

[liunx]

i need to make rollovers on a page with tables...can someone please send me some code?? thanks!<!--content--><Table align="center"><br />
<tr><br />
<td width="100" bgcolor="white" align="Center" onMouseover="this.style.backgroundColor='gray'" onMouseout="this.style.backgroundColor='white'"><br />
<a class="1" href=http://www.htmlforums.com/archive/index.php/"index.htm"><b><font color="black">Home</font></b></a></td><br />
</tr><!--content-->cool...but does this work only for ie and what if i want to make rollovers with images?<!--content-->Hi shutup_625,<br />
<br />
I'm not sure if the code xlnk works in Nestcape, probably does in N6 if not earlier version.<br />
<br />
There are at least two basic ways to do image rollovers. Just use an event in an anchor tag or use a JS to swap images.<br />
<br />
Using the onmouseover/onmouseout event you can do something like this:<br />
<br />
<a href=http://www.htmlforums.com/archive/index.php/"yourpage.html" ONMOUSEOVER="enter.src=blue2a.src"<br />
ONMOUSEOUT="enter.src=http://www.htmlforums.com/archive/index.php/blue2.src"><br />
<img name="enter" src=http://www.htmlforums.com/archive/index.php/"images/blue2.jpg" width="200" height="120" border="0" alt="CLICK TO ENTER"></a><br />
<br />
preload the images using a simple JS in the head section:<br />
<br />
<SCRIPT LANGUAGE="Javascript"><br />
<br />
<!--<br />
<br />
blue2a=new Image(200,120); blue2=new Image(200,120);<br />
blue2a.src=http://www.htmlforums.com/archive/index.php/"images/your_image.jpg"; blue2.src="images/your_other_image.jpg";<br />
<br />
//--><br />
</SCRIPT><br />
<br />
substitute your names and directories in place of the examples.<!--content-->you are right, mine doesnt work well in netscape , workin on that though.<!--content-->if you want image rollovers:<br />
<table align="center"> <br />
<tr> <br />
<td width="100" align="Center"><br />
<img src=http://www.htmlforums.com/archive/index.php/"oldPic.gif" onMouseover="this.src='newPic.gif'"<br />
onMouseout="this.src='http://www.htmlforums.com/archive/index.php/oldPic.gif'"> <br />
<a class="1" href=http://www.htmlforums.com/archive/index.php/"index.htm"><b><font color="black">Home</font></b></a></td> <br />
</tr><!--content-->Originally posted by jonhanlon <br />
if you want image rollovers:<br />
<table align="center"> <br />
<tr> <br />
<td width="100" align="Center"><br />
<img src=http://www.htmlforums.com/archive/index.php/"oldPic.gif" onMouseover="this.src='newPic.gif'"<br />
onMouseout="this.src='http://www.htmlforums.com/archive/index.php/oldPic.gif'"> <br />
<a class="1" href=http://www.htmlforums.com/archive/index.php/"index.htm"><b><font color="black">Home</font></b></a></td> <br />
</tr> <br />
<br />
Will using that code preload the roll over image?<br />
<br />
Kevin<!--content-->You can pre-load the images by putting this in your document:<br />
<br />
<script language="Javascript"><br />
var bufferedImage1 = new Image();<br />
bufferedImage1.src=http://www.htmlforums.com/archive/index.php/"/images/oldPic.gif";<br />
var bufferedImage2 = new Image();<br />
bufferedImage2.src=http://www.htmlforums.com/archive/index.php/"/images/newPic.gif";<br />
</script><br />
<br />
Usually the HEAD section is best so it gets done before the page is rendered.<br />
Note that if the target table is large (with lots of cells), then the preloading can be counter productive. In that case I'd look at using a filter to change to look of the cell, rather than an image swop.<!--content-->Thanks for the thorough explanation <br />
<br />
Yep...too much preloading is not a good thing. I've done that on some concept pages and it does slow things down....<br />
<br />
see this page for example (does not work in N6 but should be OK in any other 4.0+ browser)<br />
<br />
<!-- w --><a class="postlink" href="http://www.e-pixs.com/concrete/concrete.html">www.e-pixs.com/concrete/concrete.html</a><!-- w --><br />
<br />
its basically an old experiment using simple DHTML effects but shows how preloading of large (or large file size) images slows down page load. <br />
<br />
Regards,<br />
Kevin<!--content-->