[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
 
Discussioni simili
Autore Titolo Forum Risposte Data
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
T [Javascript] [RISOLTO] Problema con Google Maps e "Zero_Results" Javascript 11
steak [RISOLTO] Problema con 'a:hover' HTML e CSS 12
V [RISOLTO]Problema con il POST PHP 8
A [Risolto] Problema con un list box Classic ASP 2
M [Risolto]Problema con risposta json Sviluppo app per Android 6
A [PHP] Problema query insert [RISOLTO] PHP 14
K [RISOLTO] Problema Griglia Php+Mysql PHP 13
elpirata [RISOLTO][Mysql] Problema insert valori apostrofati MySQL 1
Kolop [RISOLTO][PHP] Problema Pagination PHP 2
S Problema in PHP per invio file XML - RISOLTO- PHP 8
T [Photoshop] Problema creazione pennello personalizzato [RISOLTO] Photoshop 3
F [risolto] Problema javascript Internet Explorer Javascript 1
otto9due [risolto] Problema sessioni php e login PHP 5
Alessandro Le Mura [risolto] PHP problema memorizzazione array PHP 4
S [risolto] Problema riempimento di una tabella PHP 6
P [risolto] Problema funzione raggruppamento di elementi Javascript 4
Virginia86 [risolto] Problema select e verifica form PHP 38
M [RISOLTO]Problema controllo e passaggio di valori da una pagina all''altra PHP 4
H [RISOLTO]Problema connessione + insert mysqli PHP 10
O [risolto] Inserimento nuovo campo in mysql. Problema PHP 6
C [RISOLTO] Problema somma td, prende solo il primo valore jQuery 7
C Problema Risolto Flash 0
L (risolto) MySQL 0
B getElementById su piu id(Risolto) Javascript 6
L Esercitarsi con Js [RISOLTO] Javascript 4
C [RISOLTO]Inserimento variabile php in input html PHP 20
L risolto visualizzazione e ordinamento dati PHP 1
moustache [RISOLTO] SQL PHP IIS PHP 8
Sergio Unia Ricezione email con destinatari multipli [Risolto] PHP 2
L update tabelle in php mysql [risolto] PHP 6
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [RISOLTO] Stampa a video risultato count in html PHP 13
L [RISOLTO] Eliminare una discussione creata PHP 3
B [PHP] recuperare IP dei server in load balancing [RISOLTO] PHP 3
S [RISOLTO] aggiorna tabella da select option asp classic Classic ASP 7
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
G [MS Access] Gestione biglietti [RISOLTO] MS Access 2
G [MS Access] Casella combinata & Query [RISOLTO] MS Access 4
G [MS Access] Query mese corrente con conteggio [RISOLTO] MS Access 2
M [RISOLTO]Windows media player non mi funziona più su win 10 pro 64 bit Windows e Software 2
C [RISOLTO][PHP] Errore di sintassi PHP 8
IT9-Gpp [RISOLTO] Leggere variabile restituita da success Ajax 3
C [RISOLTO][PHP] Funzione ONclick PHP 14
C [RISOLTO][PHP] Conteggio righe di una tabella PHP 4
N [PHP] Utilizzo variabili di sessione [Risolto] PHP 13
Tommy03 [RISOLTO][PHP] Webserver o devserver? PHP 2
Sergio Unia Recupero dati da una vecchia versione MySql [Risolto] MySQL 4
spider81man [PHP] Problemi cancellazione dato su DB [RISOLTO] PHP 1

Discussioni simili