mappa immagine con css + script per movimentarlo

astrovic

mappa immagine con css + script per movimentarlo

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

[HTML]
<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}

ul{position:relative;width:450px;height:280px;
overflow:hidden;background-image: url(home_corsi_colori.gif)}
li{text-indent: -9999em;width:0;height:0}
a{position:absolute;background-image: url(home_corsi_colori.gif)}

#immagine1 a{left:0;top:0;width:120px;height:100px;background-position: 0 0}
a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -280px}
#immagine2 a{left:300px;top:0px;height:100px;width:150px;background-position:-300px -0px}
a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -560px}
#immagine3 a{left:315px;top:185px;height:95px;width:135px;background-position:-315px -185px}
a:hover{z-index: 1;left:0;top:0;width:450px;height:280px;background-position: 0 -840px}
#immagine4 a{left:0px;top:185px;height:95px;width:130px;background-position:0px -185px}
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>

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><li><div style="position: absolute; left: 133px; top: 0px; width: 167px; height: 280px; z-index: 3" id="separatore-vert">&nbsp;</div><div style="position: absolute; left: 0px; top: 102px; width: 450px; height: 81px; z-index: 2" id="separatore-orizz">&nbsp;</div></li>';
fcontent[0]='<li id="immagine1" style="z-index: 0"><a href="/immagine1.asp" title="immagine1">immagine1</a></li>';fcontent[1]='<li id="immagine2" style="z-index: 0"><a href="/immagine2.asp" title="immagine2" >immagine2</a></li>';fcontent[2]='<li id="immagine3" style="z-index: 0"><a href="/immagine3.asp" title="immagine3" >immagine3</a></li>';fcontent[3]='<li id="immagine4" style="z-index: 0"><a href="/immagine4.asp" title="immagine4" >immagine4 & Quando</a></li></ul>';
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*.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*-endcolor*);
		if(diff > 0) {
			newcolor* = startcolor*-(Math.round((diff/maxsteps))*step);
			} 
		else {
		newcolor* = startcolor*+(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">&nbsp;</div>
			<div style="position: absolute; left: 0px; top: 102px; width: 450px; height: 81px; z-index: 2" id="separatore-orizz">&nbsp;</div>
				<li id="immagine1"><a href="/immagine1.asp" title="immagine1">immagine1</a></li>
				<li id="immagine2"><a href="/immagine2.asp" title="immagine2" >immagine2</a></li>
				<li id="immagine3"><a href="/immagine3.asp" title="immagine3" >immagine3</a></li>
				<li id="immagine4"><a href="/immagine4.asp" title="immagine4" >immagine4</a>
			</li>
		</ul>
</div>

</body>
</html>
[/HTML]