Visualizzazione risultati 1 fino 21 di 21

Discussione: Cambio immagine con onmouseover

  1. #1
    Guest

    Predefinito 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!

  2. #2
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

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

  3. #3
    Guest

    Predefinito

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

  4. #4
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

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

  5. #5
    Guest

    Predefinito

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

  6. #6
    Guest

    Predefinito

    Non sarà bellissimo... e purtroppo con javascript:
    Codice HTML:
    <img src="uno.gif" id="cambia"/>
    <a href="#" onclick="document.getElementById('cambia').src='due.gif';return false;">Cambia </a>

  7. #7
    Guest

    Predefinito

    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?
    Ultima modifica di XxxJoKeRsxxX : 29-07-2010 alle ore 22.52.10

  8. #8
    Guest

    Predefinito

    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:
    Codice HTML:
    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à...

  9. #9
    Guest

    Predefinito

    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?
    Ultima modifica di XxxJoKeRsxxX : 30-07-2010 alle ore 00.05.08

  10. #10
    Guest

    Predefinito

    Devi fare OnMouseOut che fa il processo inverso :)

  11. #11
    Guest

    Predefinito

    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?

  12. #12
    L'avatar di sevenjeak
    sevenjeak non è connesso AlterGuru
    Data registrazione
    25-10-2007
    Residenza
    Roma
    Messaggi
    1,767

    Predefinito

    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?
    Ultima modifica di sevenjeak : 30-07-2010 alle ore 08.24.44

    Sevenjeak
    Software developer and much more

  13. #13
    Guest

    Predefinito

    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..
    Ultima modifica di XxxJoKeRsxxX : 30-07-2010 alle ore 09.54.47

  14. #14
    Guest

    Predefinito

    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 :)
    Codice HTML:
    <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>  
    Ultima modifica di comunitavirtuali : 30-07-2010 alle ore 09.58.57

  15. #15
    Guest

  16. #16
    Guest

    Predefinito

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

  17. #17
    Guest

    Predefinito

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

  18. #18
    L'avatar di sevenjeak
    sevenjeak non è connesso AlterGuru
    Data registrazione
    25-10-2007
    Residenza
    Roma
    Messaggi
    1,767

    Predefinito

    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

    Sevenjeak
    Software developer and much more

  19. #19
    Guest

    Predefinito

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

  20. #20
    L'avatar di sevenjeak
    sevenjeak non è connesso AlterGuru
    Data registrazione
    25-10-2007
    Residenza
    Roma
    Messaggi
    1,767

    Predefinito

    Prova a modificare il codice cosi:
    Codice HTML:
    <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?
    Ultima modifica di sevenjeak : 30-07-2010 alle ore 10.36.13

    Sevenjeak
    Software developer and much more

  21. #21
    Guest

    Predefinito

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

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •