PDA

View Full Version : Table Mouse Roll Over Does not Preload

dawuad
07-13-2004, 09:54 PM
Hi, my rollover image for my table does not work. It does not seem to preload the images as expected, so the rollover effect does not look good. There seems to be some type of a lag when I rollover. I don't understand why? Below is the code. It can also be found at http://members.lycos.co.uk/eflix/junk.html
http://members.lycos.co.uk/eflix/junk.html


<html>
<head>
<SCRIPT language="JavaScript">
if (document.images){
var preloadPic1 = new Image();
preloadPic1.src = 'http://members.lycos.co.uk/eflix/TBOFF.gif';
var preloadPic2 = new Image();
preloadPic2.src = 'http://members.lycos.co.uk/eflix/TBON.gif;';
}
</SCRIPT>
<STYLE>
.topbar {background-image:url('http://members.lycos.co.uk/eflix/TBOFF.gif'); }
.topbar2 {background-image:url('http://members.lycos.co.uk/eflix/TBON.gif;');}
</STYLE>
</head>
<body>

<table cellspacing=0 cellpadding=0 border=0 width=770>
<tr><td>
<table cellspacing=0 cellpadding=0 width=770 border=1 bordercolor=#6DBEE8
style="border-collapse: collapse; border-width: 1px;">
<tr height=20>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">A</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">B</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">C</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">D</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">E</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">F</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">G</a>&nbsp;
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
&nbsp;<a class="topbarlink" href="">H</a>&nbsp;
</td>
</tr>
</table>
</td></tr>
</table>
agent002
07-16-2004, 12:31 PM
I'm not sure what's wrong, maybe it's because the Image objects are created as local variables and they expire immediately? Try the preloading script in the JavaScript FAQ (http://www.htmlforums.com/showthread.php?s=&threadid=41761).