Cambio immagine con onmouseover

Salve, ho effettuato una ricerca in maniera abbastanza superficiale sul forum senza risultati. Praticamente ho realizzato un menù con delle immagini, ma vorrei fare in modo che se l'id è selected oppure con un onmouseover l'immagine del menu cambia. Spero di essere stato chiaro. Credo che in js si possa fare, ma il js non è il mio forte!

[dreadnaut]

Si pue' fare senza javascript, via css. Guarda se un esempio ti basta.

Grazie, ma non è quello che cercavo. Questo cambia lo sfondo, io vorrei qualcosa che cambia proprio l'immagine.. Come posso fare?

[dreadnaut]

la differenza? metti un link al tuo menu magari, cosi' si capisce cosa vuoi fare

Lo sò, ma così com'è mi sfalza tutto il layout. perquesto cercavo un modo per farlo con un'immagine.. C'è un modo?

Non sarà bellissimo... e purtroppo con javascript:

<img src="uno.gif" id="cambia"/>
<a href="#" onclick="document.getElementById('cambia').src='due.gif';return false;">Cambia </a>

Grazie mille! E per fare la stessa cosa al passaggio del mouse? Altra domanda: oltre all'onclick ho messo un href, ma non carica il link.. Come posso fare?

GIYF
Ehm... quanta esperienza hai con javascript/html?

Per fare al passaggio del mouse basta un OnMouseOver al posto di OnClick.
Per cambiare pagina con javascript:

location.href='http://www.bloggingdeveloper.com';

Oppure se vuoi sia caricare la pagina che eseguire l'OnClick togli il "return false;", ma non ne vedo l'utilità...

Ah ecco.. m8i era suggito il return false; Infatti avevo tentato il tuo metodo. L'unica cosa è che così il tasto non rimane a lungo, ma torna quella di prima! Il problema del onmouseover (avevo già provato) è che poi rimane selezionata anche quando il mouse non è più sopra. Devo metter un onmousedown che fà il processo inverso?

Devi fare OnMouseOut che fa il processo inverso :)

Ok. E per il fatto del Onclick, come ti ho già detto, l'immagine viene cambiata per pochi secondi e non appena carica la nuova pagina torna la solita. Come posso fare per lasciare la seconda immagine fino ad un nuovo click?

[sevenjeak]

Strano, il codice scritto da comunitavirtuali non dovrebbe dare questo problema ( almeno secondo me ).

Cmq come già detto prima, puoi farlo anche con i css, posizionando un div al posto e con la stessa grandezza dell'immagine e che abbia come sfondo l'immagine stessa. In più utilizzando questo metodo non ai il rischio che l'utente disattivando il javascript non faccia funzionare tutto lo script.

In oltre le pagine HTML caricano prima l'immagine di sfondo che un'immagine inserita in un tag img.

Se vuoi utilizzare javascript potrei impedire, insieme il tag noscript, che mostra il suo contenuto quando l'utente ha disattivato javascript, ma come già ti ho detto mi pare strano che dal codice che ti hanno postato ti ricarichi l'immagine precedente, almeno che te oltre a quel codice non abbia un'altro codice, il codice che hai è solo quello postato da comunitavirtuale?

Eppure questo è il mio codice:

<a onclick="document.getElementById('img').src='immag ini/pulsanti/Home_bis.jpg';" onmouseover="document.getElementById('img').src='i mmagini/pulsanti/Home_bis.jpg';" onmouseout="document.getElementById('img').src='im magini/pulsanti/Home.jpg';" href="index.php"><img src="immagini/pulsanti/Home.jpg" id="img"/></a>

Ma non capisco dov'è che sbaglio..

Potresti caricarlo online? Così vediamo anche il codice in azione :)

E' giusto il percorso "immag ini/"? Quello spazio è voluto?
Hai sbagliato proprio dove mettere OnMouseOut, devi metterlo come "un nuovo OnClick", quindi fuori da virgolette come hai fatto tu :)
Hai dimenticato l'attributo href (necessario per ogni link).

Guardalo con un po' di logica ed in ordine... così:
-a= collegamento iniziato
-OnClick= fa qualcosa (quello tra virgolette) quando clicchi sul pulsante
-OnMouseOver= fa qualcosa (quello tra virgolette) quando vai con il mouse sul pulsante
-OnMouseOut= fa qualcosa (quello tra virgolette) quando esci con il mouse dalla posizione del pulsante
-href= il collegamento dove andrà? Qui lo decidi.
-> chiudo l'inizio del collgamento
-<img> metto l'immagine e gli do l'IDgiusto, così posso ritrovarla con getElementById()
-</a> fine collegamento

Se ti sembra solo un'insieme di codici a caso non andiamo da nessuna parte, guardalo sotto una nuova luce... potrebbe iniziare a piacerti e a non darti tanti problemi :)

Edit: usa i tag appropriati per il codice :)

<a OnClick="document.getElementById('img').src='immagini/pulsanti/Home_bis.jpg';" OnMouseOver="document.getElementById('img').src='immagini/pulsanti/Home_bis.jpg';" OnMouseOut="document.getElementById('img').src='immagini/pulsanti/Home.jpg';" href="index.php">
<img src="immagini/pulsanti/Home.jpg" id="img"/></a>  

Ecco il link all'azione: http://xxxjokersxxx.altervista.org/test.html

Togli .src='HOME.jpg'; e metti al posto di # la pagina in cui vuoi vada.
Se volevi solo l'effetto "cambio immagine quando passa sopra il mouse" adesso funziona :)

Si, lo sò, ma io vorrei anche l'effetto di link cambio immagine sulla futura pagina.. Non sò se mi sono spiegato!

[sevenjeak]

Forse sono io che per sbaglio non ho letto bene la discussione, ma dove sta l'errore? io non vedo nulla, l'immagini li cambia correttamente

Si, al passaggio del mouse, ma io vorrei che con un click la seconda immagine rimanga fino ad un nuovo click...

[sevenjeak]

Prova a modificare il codice cosi:

<a OnClick="document.getElementById('img').src='immagini/pulsanti/Home_bis.jpg';document.getElementById('img').removeAttribute('OnMouseOut');" OnMouseOver="document.getElementById('img').src='immagini/pulsanti/Home_bis.jpg';" OnMouseOut="document.getElementById('img').src='immagini/pulsanti/Home.jpg';" href="index.php">
<img src="immagini/pulsanti/Home.jpg" id="img"/></a>

In poche parole ho aggiunto, all'evento onClick, la possibilità di rimuovere l'attributo OnMouseOut grazie al metodo RemoveAttribute(), per evitare che rivenga eseguito in futuro.

Ora non ho capito bene una cosa, l'immagine dovrebbe rimanere fino al nuovo click, ma al nuovo click cosa vuoi che accade?

Voglio che l'immagine torni la solita (l'immagine 1)