Ragazzi mi serve il vostro aiuto.
Sono riuscito a creare un rollover disgiunto tramite google e un po' di ragionamento ed è venuta fuori questa pagine web (per adesso sono prove)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
</head><script type="text/javascript">
var imgOver=new Image(), imgOut=new Image();
imgOver.src="foto1.jpg";
imgOut.src="sfondo.jpg";

var imgOver1=new Image(), imgOut1=new Image();
imgOver1.src="foto2.jpg";
imgOut1.src="sfondo.jpg";

var imgOver2=new Image(), imgOut2=new Image();
imgOver2.src="foto3.jpg";
imgOut2.src="sfondo.jpg";

var imgOver3=new Image(), imgOut3=new Image();
imgOver3.src="foto4.jpg";
imgOut3.src="sfondo.jpg";

var imgOver4=new Image(), imgOut4=new Image();
imgOver4.src="foto5.jpg";
imgOut4.src="sfondo.jpg";

var imgOver5=new Image(), imgOut5=new Image();
imgOver5.src="foto6.jpg";
imgOut5.src="sfondo.jpg";

var imgOver6=new Image(), imgOut6=new Image();
imgOver6.src="foto6.jpg";
imgOut6.src="sfondo.jpg";

var imgOver7=new Image(), imgOut7=new Image();
imgOver7.src="foto7.jpg";
imgOut7.src="sfondo.jpg";

var imgOver8=new Image(), imgOut8=new Image();
imgOver8.src="foto8.jpg";
imgOut8.src="sfondo.jpg";

var imgOver9=new Image(), imgOut9=new Image();
imgOver9.src="foto9.jpg";
imgOut9.src="sfondo.jpg";

</script>



<body>
<table width="733" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver.src"
onmouseout="document.images['mypic'].src=imgOut.src">
[img]1.jpg[/img]</td>
<td height="900" rowspan="9">[img]sfondo.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver1.src"
onmouseout="document.images['mypic'].src=imgOut1.src">[img]2.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver2.src"
onmouseout="document.images['mypic'].src=imgOut2.src">[img]3.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver3.src"
onmouseout="document.images['mypic'].src=imgOut3.src">[img]4.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver4.src"
onmouseout="document.images['mypic'].src=imgOut4.src">[img]5.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver5.src"
onmouseout="document.images['mypic'].src=imgOut5.src">[img]6.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver6.src"
onmouseout="document.images['mypic'].src=imgOut6.src">[img]7.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver7.src"
onmouseout="document.images['mypic'].src=imgOut7.src">[img]8.jpg[/img]</td>
</tr>
<tr>
<td height="100" valign="top"><a href="javascript:void(0)"
onmouseover="document.images['mypic'].src=imgOver8.src"
onmouseout="document.images['mypic'].src=imgOut8.src">[img]9.jpg[/img]</td>
</tr>
</table>
</body>
</html>


come faccio il preload di tutto queste immagini? non ne capisco niente di javascript, ma tramite un codice base sono riuscito a capire il funzionamento di questo.

Grazie a chi mi da una mano.