[RISOLTO] Problema con mouseout ed immagini

lsnight

Nuovo Utente
15 Ott 2013
25
0
0
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?

Codice:
<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

HTML:
<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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, senza togliere nulla a quello che hai scritto e che ho provato, io imposterei lo script in un altro modo
HTML:
<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:confused:
in realta io ho messo solo images/img4.jpg
 
Ultima modifica di un moderatore:

lsnight

Nuovo Utente
15 Ott 2013
25
0
0
Ciao, senza togliere nulla a quello che hai scritto e che ho provato, io imposterei lo script in un altro modo
HTML:
<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:confused:
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 :D Grazie davvero all'infinito