Hvordan lage en mus-Over Button

May 4

Før musepekeren over knappene er knapper på en nettside som endres når du holder musepekeren over den. Det er ingen grense for hvor mange unike mus-over knapper du kan lage med bare en enkel bilderedigering og noen få linjer med kode. Mens roll knappene er mulig å gjøre ved hjelp av kun koding, bilder er den enkleste ruten fordi de er mye enklere å endre og redigere.

Bruksanvisning

1 Åpne programmet. I dette eksempelet vil vi bruke Microsoft Paint, selv om du kan bruke en hvilken som helst bilderedigeringsprogram du foretrekker, for eksempel Photoshop. I Windows 7 klikker du på Start-knappen, skriv "Paint", og trykk Enter.

2 Design din knapp. I bildeseksjonen under kategorien Hjem klikker Re-størrelse og velg Pixels alternativknappen. den "Behold Aspect Ratio" er merket av å sørge for, skriv inn ønsket knapp størrelse i den horisontale og vertikale bokser og klikk på OK. Bruk verktøyene i programmet sammen med din egen kreativitet til å lage din knapp.

3 Avslutt og lagre filen. Bruk den blå knappen øverst til venstre i vinduet for å få ned menyen og velg Egenskaper. Velg Piksler alternativknappen og endre høyden til nøyaktig det dobbelte av dagens størrelse og klikk på OK. Du er nå lage rollover bilde direkte under den opprinnelige knappen. Når du er ferdig, klikker du på diskett på toppen av programvinduet, og lagre filen, bruker PNG-format i Paint for å unngå fargefeil. Last denne bildefilen til webserveren eller image fiendtlig område.

4 Legg til følgende kode i websiden din i <HEAD> tag:

#button {

display: block;

Bredde: ### px;

høyde: @@ px;

bakgrunn: URL ( "button.gif") no-repeat 0 0;

}

#button: hover {

background-posisjon: 0 - @@ px;

}

#button span {

position: absolute;

top: -999em;

}

</ Style>

Erstatt alle hash tegn (#) med bredden på knappen, og alt til symboler (@) med høyden på knappen (før du doblet det). Bytt button.gif med full URL til bildet.

5 Legg til følgende kode i <BODY> tag hvor du vil at knappen skal vises:

<a id="button" href="URL" title="Button"> <span> Knapp Text </ span> </a>

Erstatt "URL" med nettadressen til siden knappen er knytte til.

6 Test din nye knappen på ditt nettsted. Hvis du bruker knappen for navigasjonsformål, kan det være lurt å gjøre flere mer!