Se stai progettando una pagina web e si desidera creare un'immagine che cambia in un'altra immagine quando il mouse passa sopra di esso, sarà necessario iniziare con due immagini---uno che viene visualizzato quando il mouse non è sopra l'immagine e un altro che viene visualizzato quando il mouse viene posizionato su di esso. È possibile creare un'immagine di rollover utilizzando JavaScript o fogli di stile CSS. Se siete breve in tempo o non voglio creare il codice manualmente, è possibile utilizzare invece un generatore di codice di ribaltamento.

Istruzioni

Utilizzo di JavaScript per creare l'immagine di Rollover

1

Aprire la cartella contenente il file HTML nel vostro editor preferito web facendo clic su "File" e "Apri".

2

Fare clic sul pulsante "Crea nuova cartella" nella finestra di dialogo "Apri" e il nome "immagini". Quindi fare clic su "Annulla" e ridurre al minimo l'editor web.

3

Creare o trovare le immagini di rollover che si desidera utilizzare. Salvare i file nella cartella "images" cliccando su "File" e "Salva con nome", passando alla cartella e premendo "Salva".

4

Tornare al tuo editor web e aprire il file HTML in cui inserire le immagini di rollover.

5

Inserire il codice JavaScript seguente tra i tag < BODY > del file HTML, in cui si desidera applicare l'effetto:

< a href = "onmouseover =" documento. Rollover.src='images/rollover-image.jpg'; "onmouseout ="document. Rollover.src='images/Normal-image.jpg'; " >
< img nome = "Rollover" border = "0" / >< /a >

6

Sostituire "normale-image. jpg" e "rollover-immagine. jpg" con i nomi effettivi dei file immagine. (Nota: "onmouseover" consente di visualizzare l'immagine quando il mouse passa sopra di esso, mentre "onmouseout" fa l'opposto).

Utilizzando il generatore di ribaltamento di immagine

7

Creare il codice per l'immagine di rollover a creare Online (Vedi risorse qui sotto).

8

Immettere l'indirizzo web completo delle vostre immagini in caselle di testo. Poi clicca su "Genera codice My" e premere "Evidenziare tutti."

9

Copiare il codice facendo clic destro su di esso e scegliere "Copia".

10

Aprire il tuo file HTML dove apparirà il pulsante rollover e incollare il codice ("Edit" e "Incolla") tra il tag < BODY > della tua pagina (dove volete che appaia).