Codice HTML direttamente non influisce sul colore delle immagini. Per modificare l'aspetto di un'immagine su un evento di mouse-sopra, un po' sleight-de-mano e alcuni script java sono necessari. Il trucco di questo processo consiste nell'utilizzare due immagini per lo spazio di immagine sulla pagina. Java script è utilizzato per notare un evento MouseOver e inoltrare la chiamata al browser Web di scambiare l'immagine predefinita per l'immagine evidenziata o colorato.

Istruzioni

1

Aprire la foto o l'immagine in un editor di grafica, quindi apportare le modifiche di colore desiderato per l'immagine all'interno dell'editor. Utilizzare la funzione "Salva con nome" per salvare la copia modificata, ma non modificare l'immagine originale. Al termine, si dovrebbero avere due immagini con le stesse dimensioni e colori diversi.

2

Copiare entrambe le immagini nella stessa directory come file HTML della pagina.

3

Definire una funzione JavaScript nella sezione head del file HTML della pagina. In questo caso:

funzione change_color (pic_name, img_src)

{

documento [pic_name]. src = img_src;

}

4

Inserire le informazioni di collegamento ipertestuale e chiamata di funzione nella sezione corpo di HTML. In questo esempio:

< A HREF="my.html" onmouseover = "change_color ('this_picture', 'pic2.jpg')"

onmouseout = "change_color ('this_picture', 'pic1.jpg')" >

5

Definire l'origine dell'immagine e dimensioni del corpo del codice HTML e chiudere il tag di ancoraggio. Continuando con l'esempio:

< IMG SRC="pic1.jpg" WIDTH = "150" HEIGHT = "75"

NOME = "this_picture" BORDER = "0" >

< /A >

6

Salvare il file e testare la funzione nel vostro browser Web.

Consigli & Avvertenze

• Questa tecnica funziona meglio con immagini di piccole dimensioni. I visitatori del sito con connessioni dial-up più lente potrebbero verificarsi tempi più lunghi di caricamento iniziale il file grafici di grandi dimensioni che possono ridurre l'impatto visivo del cambiamento di colore.