Hvordan lage rollover bilder i HTML Text

Med millioner av nettsteder på Internett, er det viktig at nettstedet være minneverdig og unik. En teknikk som brukes for å legge til en dynamisk effekt på nettsteder er rollover bilder, også kjent som roll knapper. I hovedsak, når den besøkende ruller over et bilde, vil det endre til noe annet. Når brukeren ruller av bildet, vil den gå tilbake til den opprinnelige grafikken. Vanlige velt inkluderer subtile effekter som å endre fargen på bildet eller skrift. Du kan lage din egen roll bilde med grunnleggende HTML-formatering i ulike web-design programmer.

Bruksanvisning

1 Opprett et nytt dokument av ønsket størrelse i piksler i foto-redigering programvare som Photoshop. Opprett knappen og rollover bilder. De to bildene må være identiske i størrelse.

2 Spar både bilder hver for seg ved å navigere til "Fil" -menyen og klikke "Lagre". Lagre bildene som enten JPEG, GIF eller PNG-filer. Selv om JPEG og GIF-filer er mer vanlig, PNG-filer beholde åpenhet. Pass på at du lagrer bildet i nettstedets lokale rotmappen.

3 Åpne ønsket webdesign programvare, for eksempel Adobe Dreamweaver. Klikk på oppdateringsknappen i biblioteket for å oppdatere nettsiden bibliotek og lokale rotmappen. Finn bildene i den lokale rotmappen.

4 Bytt til sidens "Code View" ved å velge kodevisning-knappen.

5 Skriv "<a href=" http://yourwebsite.com "> <img onmouseover =" this.src = 'IMAGE2' "onmouseout =" this.src = 'IMAGE1' "alt =" Klikk Me "> </ a > "uten åpning og lukking anførselstegn inn i koden.

6 Erstatt "http://yourwebsite.com" med navnet på ditt nettsted. Erstatt "IMAGE1" og "IMAGE2" med navnet på knappe og rollover bilder. Din roll bildet vil erstatte "IMAGE2", mens "IMAGE1" står for den innledende knappebilde.