| Precedente :: Successivo |
| Autore |
Messaggio |
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
 Inviato: 19 Gen 2009 17:59 Oggetto: * [Javascript] Cambio immagine al passagio del mouse |
 |
|
Salve utenti.
Come scritto nel titolo vorrei poter fare uno script in javascript che mi dice: quando passo su un'immagina mi cambia automaticamente immagine, per poi rimettere quella che c'erà prima quando mi si verifica l'evento onmouseout.
Come potrei fare lo script? |
|
| Top |
|
 |
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 19 Gen 2009 18:03 Oggetto: |
|
|
potresti usare i CSS
E' una soluzione più ottimale 
qui trovi un tutorial per dei bottoni ma è uguale 
Se vuoi ti do il codice javascript però disattivandolo l'effetto scompare
 |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 19 Gen 2009 19:39 Oggetto: |
|
|
A me infatti mi servirebbe + il javascript, soprattuto il codice che mi dice quando: clicco passo su un'immagine con un determinato nome mi si cambia in un'altra immagine e all'evento onmouseout mi ritorna com'era prima, anche perche l'immagine del menù lo già fatte.
P.S. : senno mi puoi dare lo stesso codice in php, ho un codice che se esegue solo se javascript e disattivato. |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 19 Gen 2009 19:47 Oggetto: |
|
|
| Codice: | function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
|
Ti posto anche l'html? |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 19 Gen 2009 20:23 Oggetto: |
|
|
| Si, se magari me lo spieghi anche, lo capisco meglio. |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 19 Gen 2009 20:31 Oggetto: |
|
|
| sevenjeak ha scritto: | | Si, se magari me lo spieghi anche, lo capisco meglio. |
finisco latino se avrò tempo te lo farò stasera sennò domani |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 19 Gen 2009 20:32 Oggetto: |
|
|
| ok, allora aspetto. |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 20 Gen 2009 18:00 Oggetto: |
|
|
Intanto ti ti dico che c'è anche un alternativa al codice scritto da me sopra è questa:
| Codice: |
var Img2On = new Image();
Img2On.src = "passaggiomouse.jpg";//questa immagine verrà fuori al passaggio del mouse
var Img2Off = new Image();
Img2Off.src = "out.jpg";//questa immagine verrà fuori quando il mouse non sarà sul bottone
function mouseover(picimage)//funzione che si attiva con OnMouseOver
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function mouseout(picimage)//funzione che si attiva con OnMouseOut
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
}
</script> |
Tutto è reso possibile grazie a OnMouseOver e OnMouseOut.Trovi qualcosa qui
Questo metodo però permette di caricare solo un immagine predefinita mentra con quello di prima possiamo caricare quante immagine vogliamo senza modificare il js.
L'html per questo è:
| Codice: |
<a href="#" onMouseOver="mouseover('Img2')" onMouseOut = "mouseout('Img2')">
<img src="bottone.jpg" border="0" name="link!">
</a> |
Per il primo l'html è questo:
| Codice: | | <body onLoad="MM_preloadImages('img/home-on.gif','img/info-on.gif')"> |
Cosi carichiamo la funzione.
Poi basta aggingere questa immagine:
| Codice: |
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('immagine','','percorso-immagine-mouse',1)"><img name="immagine" src="percorso_immagine-nmouse" border="0"></a> |
Spero di essere stato chiaro
|
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 31 Gen 2009 19:22 Oggetto: |
|
|
| Ok, grazie per l'aiuto. |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 31 Gen 2009 20:19 Oggetto: |
|
|
| sevenjeak ha scritto: | | Ok, grazie per l'aiuto. |
prego,funziona? |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 02 Feb 2009 17:06 Oggetto: |
|
|
Ti ho ringraziato senza averlo potuto provare, cmq il codice non va:
Mi puoi rispiegare che fai nel javascript? |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 02 Feb 2009 17:34 Oggetto: |
|
|
| Citazione: | | il codice non va: |
Non funziona? |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 02 Feb 2009 17:35 Oggetto: |
|
|
qui
| Codice: | var Img2On = new Image();
Img2On.src = "passaggiomouse.jpg";//questa immagine verrà fuori al passaggio del mouse
var Img2Off = new Image();
Img2Off.src = "out.jpg";//questa immagine verrà fuori quando il mouse non sarà sul bottone
function mouseover(picimage)//funzione che si attiva con OnMouseOver
{
Picture_Over = eval(picimage +"On.src")
document[picimage].src = Picture_Over
}
function mouseout(picimage)//funzione che si attiva con OnMouseOut
{
Picture_Out = eval(picimage +"Off.src")
document[picimage].src = Picture_Out
} |
Ho messo i commenti spiegando cosa facevo |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 02 Feb 2009 18:07 Oggetto: |
|
|
no, non funziona, scusa per prima, ma non ho potuto provarlo imediatamente.
Cmq i commenti lo capiti.
solo le prime due variabile che non ho capito cosa sono.
come posso risolvere allore se non va? |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 02 Feb 2009 18:32 Oggetto: |
|
|
| prova con l'altro codice |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 03 Feb 2009 17:32 Oggetto: |
|
|
| Con il primo codice postato mi succede che passo su l'immagine, ma mi visualizza come se l'altro immagine non esiste, mentre altre volte non mi va proprio. |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 15:59
Messaggi: 4412
|
| Inviato: 03 Feb 2009 19:17 Oggetto: |
|
|
Puoi mettere tutto on-line,così vedo meglio altrimenti non mi rendo conto.
Grazie
|
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 04 Feb 2009 16:21 Oggetto: |
|
|
| Non serve, ho trovato l'errore, nel link, dove era difinita la funzione non avevo messo l'url dell'immagine che sostituisce l'immagine originale. |
|
| Top |
|
|
Urzetto
Mortale devoto
Registrato: 31/01/09 20:49
Messaggi: 17
|
| Inviato: 05 Feb 2009 00:40 Oggetto: |
|
|
ma basta che fai cosi
<img src="./images/1_img.png"
onmouseover="this.src='./images/2_img.png'"
onmouseout="this.src='./images/1_img.png'">
ciao |
|
| Top |
|
|
sevenjeak
Semidio
Registrato: 04/02/08 21:05
Messaggi: 308
Residenza: Roma
|
| Inviato: 06 Feb 2009 15:07 Oggetto: |
 |
|
| Si, ma cosi bisogna riscriverlo ogni volta che dichiari una immagine |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
