Come visualizzare una nuova immagine al passaggio del mouse

August 25

È possibile utilizzare un'immagine effetto cambia nella tua pagina web per accentuare i pulsanti, banner e immagini dei menu. Quando un utente sposta il mouse per Passa sopra l'immagine, lo farà si trasforma in una seconda immagine fino a quando l'utente sposta il mouse fuori l'immagine. Affinché questo funzioni, è necessario che le due immagini ospitate su un server online. È quindi possibile utilizzare un codice javascript sul tuo sito web per fare il cambiamento immagine di un mouse-over.

istruzione

1 Carica le due immagini che si desidera utilizzare per l'host web o di un servizio di hosting di immagini.

2 Registrare l'indirizzo URL per entrambe le immagini. Avrete bisogno di questo durante la creazione del codice.

3 Evidenziare il seguente codice JavaScript, quindi fare clic destro e scegliere "Copia" dal menu:

<A href = "URL" onmouseover = "document.but.src = 'Image2'"

onmouseout = "document.but.src = 'Image1'">

<IMG SRC = "Image1" name = BORDER "Imagename" = "0" alt = "alttext">

</A>

4 Aprire il codice pagina web in un editor di testo o in linea.

5 Pulsante destro del mouse all'interno dell'editor e scegliere "Incolla" per incollare una copia del codice JavaScript.

6 Sostituire "URL" con un indirizzo URL di una pagina web se l'immagine si collegherà ad un altro sito. Se l'immagine non si collega a un sito è possibile rimuovere il "HREF =" URL "" parte del codice.

7 Sostituire le due istanze di "Image1" con l'indirizzo URL per la prima immagine. Questa è l'immagine normale un visitatore vedrà quando non passare il mouse sopra l'immagine.

8 Sostituire "Image2" con l'indirizzo URL della seconda immagine. Questo sarà l'immagine del visitatore vedrà quando si passa con il mouse sopra l'immagine.

9 Sostituire "Imagename" con il nome dell'immagine. Questo può essere qualsiasi nome si sceglie.

10 Sostituire "alttext" con il testo che si desidera venga visualizzato quando qualcuno Mouses sull'immagine.

11 Salvare le modifiche alla tua pagina web e pubblicarlo. Quando si visualizza la pagina web, si vedrà la nuova immagine che cambia quando si passa il mouse su di esso.

Consigli e avvertenze

  • Non rimuovere le virgolette quando si modifica il codice o il codice non funzionerà.