Hvordan endre et bilde Color Når du musen over det

HTML-kode er ikke direkte påvirke en bilder 'farge. For å endre utseendet på et bilde på en mus-over arrangementet, litt fingerferdighet-of-hånd, og noen java script er nødvendig. Trikset til denne prosessen er å bruke to bilder for bilde plass på siden. Java-skript brukes til å merke en mus-over hendelsen, og utstede kallet til nettleseren for å bytte standardbildet for den markerte eller farget bilde.

Bruksanvisning

1 Åpne bilde eller et bilde i et bilderedigeringsprogram, så gjør de ønskede fargeendringer i bildet inne redaktøren. Bruk "Lagre som" funksjon for å lagre den endrede kopien, men endrer ikke det opprinnelige bildet. Når du er ferdig, bør du ha to bilder med samme dimensjoner, og forskjellige farger.

2 Kopier begge bildene til samme katalog som sidens HTML-fil.

3 Definer en Javascript-funksjonen i hodet delen av siden HTML-fil. I dette tilfellet:

funksjon change_color (pic_name, img_src)

{

dokument [pic_name] .src = img_src;

}

4 Plasser funksjonskall og hyperlink informasjon i HTML kropp delen. For dette eksempelet:

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

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

5 Definer bildekilde og størrelse i kroppen av HTML-kode, og lukk ankerkoden. Fortsetter eksempel:

<Img src = "pic1.jpg" width = "150" height = "75"

NAME = "this_picture" border = "0">

</A>

6 Lagre filen, og teste funksjonen i din nettleser.

Hint

• Denne teknikken fungerer best med mindre bilder. Besøkende med tregere eksterne tilkoblinger kan oppleve lengre innledende lastetider på store grafikkfiler som kan redusere den visuelle virkningen av fargeendring.