The bckground images in my table won't load until mouse roll-over...

[123456programmer]

I have this CSS that would change the background when mouse roll-over
<TD WIDTH=101 HEIGHT=75 background="menu.gif" style="cursor: pointer;" onClick="document.location = '

http://www.domain.com/index.php?act=submit+data'"

onmouseover="this.background=

http://www.domain.com/menu/menu_h.gif'"

onmouseout="this.background='

http://www.domain.com/menu/menu.gif'">

thanks in advance.

PS: Is there a better way of doing this roll-over action? By better I mean; that works on the most of the browsers out there.

 

[tviman]

Like the response on the HTML forum noted, you should preload the images first, then they'll be available immediately rather than having to make a call the the server. Here's the mouseover/mouseout script I've been using for years and it works on all browsers:

<script language="javascript">
[COLOR=red]img1[/color] = new Image(102,30);
[COLOR=red]img1[/color].src = "[URL unfurl="true"]http://www.domain.com/menu/menu_h.gif";[/URL]
[COLOR=blue]img2[/color] = new Image(102,30);
[COLOR=blue]img2[/color].src = [URL unfurl="true"]http://www.domain.com/menu/menu.gif";[/URL]

function switchimage(imgDocID,imgObjName){
  document[img]ocID[/img].src = eval(imgObjName + ".src");}
</script>

This is the HTML code to use the above:

onmouseover="switchimage('[COLOR=green]pfe[/color]','[COLOR=blue]img2[/color]');" onmouseout="switchimage('[COLOR=green]pfe[/color]','[COLOR=red]img1[/color]');"><img src="[URL unfurl="true"]http://www.domain.com/menu/menu.gif"[/URL] width="102" height="30" border="0" name="[COLOR=green]pfe[/color]">

The name attribute must be the same for each mouseover/mouseout/image combination.

Although there is probably a limit to the number of images you can preload, I manage one site where there are 150 images defined in the javascript section (img & img.src) and I can't see any loss of performance even on an old 266mhz machine with 64mb of memory.

There's always a better way. The fun is trying to find it!