Hvordan lage Bla-Over Knapper

December 3

For å gran opp utformingen av en nettside og gjøre det visuelt stimulerende, kan du legge effekter til interaktive deler som knapper for navigasjon. En metode som vanligvis brukes er en scroll-over eller mus-over effekt. Dette tillater besøkende å gjenkjenne klikkbare deler av nettstedet ved å rulle over en knapp, som endrer farge eller avslører tekst. Du kan lage en enkel å implementere scroll-over effekt med Cascading Style Sheets (CSS).

Bruksanvisning

1 Åpne bilderedigeringsprogramvare, for eksempel MS Paint, Photoshop eller Corel Draw og opprette din knappen. Bildet må være to knapper på toppen av hverandre. Den øverste knappen er den knappen besøkende se når din web siden lastes. Den nederste knappen er den de ser når de ruller over toppen-knappen. Lagre bildet som en GIF-fil.

2 Sett inn følgende HTML-kode, ved hjelp av en HTML-editor som Dreamweaver eller Frontpage, til websiden der du vil bla-over effekt skal vises:

<a id="mybutton" href="#" title="ThisIsMyButton"> <span> button </ span> </a>

Erstatt "#" med nettadressen du vil at besøkende skal gå til etter å ha klikket på knappen.

3 Åpne en ny fil på HTML editor, og skriv inn følgende CSS-kode:

MyButton

{

display: block;

width: 107px;

høyde: 23 pikslene;

bakgrunn: url ( "mybutton.gif") no-repeat 0 0;

}

MyButton: hover

{

background-posisjon: 0 -23px;

}

MyButton span

{

display: none;

}

Sett på knappen bredde med bredden på bildet du opprettet. Høyden er den totale høyde av en knapp. Hvis høyden på to knapper stablet er 46 piksler, deretter inn 23 piksler som høyden. Erstatt "mybutton.gif" med navnet på bildet. Lagre CSS-filen i samme katalog som din webside.

4 Rediger nettsiden til å inkludere CSS-fil ved å legge til følgende kode i <head> -delen av HTML:

<Head>

</ Head>

Erstatt "scrollover.css" med navnet på din CSS-fil.