[RISOLTO] Problema con mouseout ed immagini

[lsnight]

Salve a tutti
Sicuramente se ne sarà parlato, ma non trovo proprio il problema per il mio caso.

Sto realizzando un piccolo sito, con la possibilità, che tenendo il mouse sopra un immagine, questa cambi ogni tot secondi, per un totale di 4 immagini a riquadro.

Fin qui tutto bene, metto il mouse sopra, aspetto e cambia immagine, ma appena il mouse "esce", l'immagine non torna quella iniziale, ma rimane l'ultima "passata" dal mouse.

Ho fatto questo video per far capire meglio

[video=youtube;8xdClVDQIPM]http://www.youtube.com/watch?v=8xdClVDQIPM[/video]

Vorrei sapere, è possibile far ritornare l'immagine iniziale appena il mouse esce dall'area? Se si come?

Ed una piccola curiosità: E' possibile applicare tale script a vari riquadri con immagini differenti?

<script type="text/javascript">
 var changetimer;
 
 function change(id){
 clearInterval(changetimer);
 function swap () {
	
	 
	 
	 
	 if (id.src.match("images/img1.jpg")) { id.src = id.src.replace("images/img1.jpg","images/img2.jpg"); return false; }
	 if (id.src.match("images/img2.jpg")) { id.src = id.src.replace("images/img2.jpg","images/img3.jpg"); return false; }
	 if (id.src.match("images/img3.jpg")) { id.src = id.src.replace("images/img3.jpg","images/img4.jpg"); return false; }
	 if (id.src.match("images/img4.jpg")) { id.src = id.src.replace("images/img4.jpg","images/img1.jpg"); return false; }
	 }
	changetimer = setInterval(swap,850);
 }
 
 window.onload = function() {
 var images = document.getElementsByTagName('img');
 for (var i = 0; i < images.length; i++) {
 images[i].onmouseover = function(evt) {change(this);};
 images[i]. onmouseout = function (evt) { clearInterval (changetimer);};
 }
 }
 </script>

Questo è il codice html, se metto o non metto gli elementi negli apici di onmouseover e onmouseout non cambia niente

<div class="column1">
				
				<a href="img1.html"><img src="images/img1.jpg" width="250" height="215" alt="" onmouseover="" onmouseout="" /></a>
				
		  </div>

Grazie mille dell'aiuto

 

[criric]

Ciao, senza togliere nulla a quello che hai scritto e che ho provato, io imposterei lo script in un altro modo

<style type="text/css">
    div.column img {
        width: 250px;
        height: 215px;
    }    
</style>
<script type="text/javascript">  
  
    var img = new Array();
    img['swap1'] = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
    img['swap2'] = ["img4.jpg","img3.jpg","img2.jpg","img1.jpg"];   

    function change(id) {
        var i = 0;
        go = setInterval(function(){
            document.getElementById(id).src = "http://forum.mrwebmaster.it/images/" + img[id][i];
            if(i == img[id].length - 1) {
                i = 0;
            }else{
                i++;
            }
        },850);        
    }

    function stop(id) {
        clearInterval(go);
        document.getElementById(id).src = "images/" + img[id][0];
    }
</script>
<div class="column">
    <a onmouseover="change('swap1')" onmouseout="stop('swap1')" href="img1.html">
        <img id="swap1" src=" images/img1.jpg" alt="" />
    </a>
</div>
<div class="column">
    <a onmouseover="change('swap2')" onmouseout="stop('swap2')" href="img1.html">
        <img id="swap2" src="images/img4.jpg" alt="" />
    </a>
</div>

in questo modo puoi inserire quanti riquadri vuoi
non ho commentato se hai bisogno chiedi pure
ho testato solo su firefox , prova e fammi sapere
PS
il link all'immagine me lo aggiunge direttamente il software
in realta io ho messo solo images/img4.jpg

 

[lsnight]

Ciao, senza togliere nulla a quello che hai scritto e che ho provato, io imposterei lo script in un altro modo

<style type="text/css">
    div.column img {
        width: 250px;
        height: 215px;
    }    
</style>
<script type="text/javascript">  
  
    var img = new Array();
    img['swap1'] = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
    img['swap2'] = ["img4.jpg","img3.jpg","img2.jpg","img1.jpg"];   

    function change(id) {
        var i = 0;
        go = setInterval(function(){
            document.getElementById(id).src = "http://forum.mrwebmaster.it/images/" + img[id][i];
            if(i == img[id].length - 1) {
                i = 0;
            }else{
                i++;
            }
        },850);        
    }

    function stop(id) {
        clearInterval(go);
        document.getElementById(id).src = "http://forum.mrwebmaster.it/images/" + img[id][0];
    }
</script>
<div class="column">
    <a onmouseover="change('swap1')" onmouseout="stop('swap1')" href="img1.html">
        <img id="swap1" src=" images/img1.jpg" alt="" />
    </a>
</div>
<div class="column">
    <a onmouseover="change('swap2')" onmouseout="stop('swap2')" href="img1.html">
        <img id="swap2" src="http://forum.mrwebmaster.it/images/img4.jpg" alt="" />
    </a>
</div>

in questo modo puoi inserire quanti riquadri vuoi
non ho commentato se hai bisogno chiedi pure
ho testato solo su firefox , prova e fammi sapere
PS
il link all'immagine me lo aggiunge direttamente il software
in realta io ho messo solo images/img4.jpg

grandissimo :love: funziona alla perfezione, sia su firefox che su chrome. E' molto meglio dello script di prima, poi è molto più ordinato metterlo cosi, che con quello di prima Grazie davvero all'infinito