ti ho fatto un esempio rapido e semplicissimo che puoi usare come "base"

codice:
<!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=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#grande {position:absolute; left:39px; top:29px; width:510px; height:273px; z-index:1;}
.piccolo {position:absolute; top:329px; width:50px; height:50px; z-index:1; cursor:pointer;}
</style>
</head>
<script>
	function cambia_img(val){
		document.getElementById('img_grande').src=val+".jpg";	
	}
</script>

<body>
<div id="grande">[img][/img]</div>
<div class="piccolo" style="left:39px;" onmouseover="cambia_img('img1')">[img]img1.jpg[/img]</div>
<div class="piccolo" style="left:129px;" onmouseover="cambia_img('img2')">[img]img2.jpg[/img]</div>
<div class="piccolo" style="left:219px;" onmouseover="cambia_img('img3')">[img]img3.jpg[/img]</div>
</body>
</html>
per vedere il funzionamento (e per scaricare le 3 immagini usate) guarda
qua