ciao.
ho creato un'immagine formata da 5 immagini che, mediante css, si spostano in base a dove posiziono il mouse all'interno di un div.
questa parte funziona benissimo.
adesso vorrei uno script che faccia scorrere in automatico queste immagini. quando però col mouse torno nell'area dell'immagine, lo script si deve disattivare e deve funzionare il css che richiama le immagini al passaggio del mouse su ana determinata area.

questo è l'intero codice della pagina, ho messo sia lo script che, subito dopo, il div che funziona mediante css. vorrei che al passaggio del mouse sullo script, al posto suo si vedesse il div che c'è dopo lo script.
spero di non avervi confuso

codice:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>prova</title>
<style type="text/css"> 
 
div#map{width:470px !important;width /**/:480px;
    border:4px solid #00AAE8;margin:5px auto}
#map h3{margin:0;padding:5px 0;text-align:center;
    background:#D9F4FF;color:#444;
    font: bold 14px Tahoma,sans-serif}
 
#map ul,#map li{margin-left:10px;padding:0;list-style:none}
#map ul{position:relative;width:450px;height:280px;
    overflow:hidden;background-image: url(home_corsi_colori.gif)}
#map li{text-indent: -9999em;width:0;height:0}
#map a{position:absolute;background-image: url(home_corsi_colori.gif)}
 
#map #immagine1 a{left:0;top:0;width:120px;height:100px;background-position: 0 0}
#map #immagine1 a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -280px}
#map #immagine2 a{left:300px;top:0px;height:100px;width:150px;background-position:-300px -0px}
#map #immagine2 a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -560px}
#map #immagine3 a{left:315px;top:185px;height:95px;width:135px;background-position:-315px -185px}
#map #immagine3 a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -840px}
#map #immagine4 a{left:0px;top:185px;height:95px;width:130px;background-position:0px -185px}
#map #immagine4 a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -1120px}
</style>
</head>

<body>
		 		
<div id="map" style="width: 480px; height: 330px">
<h3>PROVA IMMAGINE</h3>


<script type="text/javascript">

	var delay = 4000; //ritardo (in millisecondi)
	var maxsteps=50; // numero di passi
	var stepdelay=50; // tempo in millisecondi di un singolo passo
	var startcolor= new Array(239,244,249); // Colore iniziale (red, green, blue)
	var endcolor=new Array(0,0,0); // Colore finale (red, green, blue)
	var fcontent=new Array();
	
	begintag='<ul>[*]<div style="position: absolute; left: 133px; top: 0px; width: 167px; height: 280px; z-index: 3" id="separatore-vert"></div><div style="position: absolute; left: 0px; top: 102px; width: 450px; height: 81px; z-index: 2" id="separatore-orizz"></div>';
	fcontent[0]='<li id="immagine1" style="z-index: 0">immagine1';fcontent[1]='<li id="immagine2" style="z-index: 0">immagine2';fcontent[2]='<li id="immagine3" style="z-index: 0">immagine3';fcontent[3]='<li id="immagine4" style="z-index: 0">immagine4 & Quando[/list]';
	closetag='';
	
	var fwidth='450px'; //larghezza
	var fheight='280px'; //altezza
	
	var fadelinks=1;
	var ie4=document.all&&!document.getElementById;
	var DOM2=document.getElementById;
	var faderdelay=0;
	var index=0;

	function changecontent(){
		if (index>=fcontent.length)
			index=0
		if (DOM2){
			document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
			document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
			if (fadelinks)
				linkcolorchange(1);
				colorfade(1, 15);
			}
		else if (ie4)
			document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
			index++
		}

	function linkcolorchange(step){
		var obj=document.getElementById("fscroller").getElementsByTagName("A");
			if (obj.length>0){
				for (i=0;i<obj.length;i++)
					obj[i].style.color=getstepcolor(step);
			}
		}

	var fadecounter;

	function colorfade(step) {
		if(step<=maxsteps) {	
			document.getElementById("fscroller").style.color=getstepcolor(step);
			if (fadelinks)
				linkcolorchange(step);
			step++;
			fadecounter=setTimeout("colorfade("+step+")",stepdelay);
			}
		else{
			clearTimeout(fadecounter);
			document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
			setTimeout("changecontent()", delay);
			}   

		}

	function getstepcolor(step) {
		var diff
		var newcolor=new Array(3);
		for(var i=0;i<3;i++) {
			diff = (startcolor[i]-endcolor[i]);
			if(diff > 0) {
				newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
				} 
			else {
			newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
				}
			}
		return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
		}

	if (ie4||DOM2)
		document.write('<div id="fscroller"></div>');

	if (window.addEventListener)
		window.addEventListener("load", changecontent, false)
	else if (window.attachEvent)
		window.attachEvent("onload", changecontent)
	else if (document.getElementById)
		window.onload=changecontent
</script>	 		

</div>


	<div id="map" style="width: 480px; height: 330px">
		<h3>PROVA IMMAGINE</h3>
			<ul>
   				<div style="position: absolute; left: 133px; top: 0px; width: 167px; height: 280px; z-index: 3" id="separatore-vert"></div>
				<div style="position: absolute; left: 0px; top: 102px; width: 450px; height: 81px; z-index: 2" id="separatore-orizz"></div>
    			<li id="immagine1">immagine1
    			<li id="immagine2">immagine2
    			<li id="immagine3">immagine3
    			<li id="immagine4">immagine4
				
			[/list]
	</div>

				 		
</body>
</html>