Bakgrunnsbelysning av knapper på websider er vanligvis organisert ved hjelp av to bilder. Når du holder musepekeren over det tilsvarende elementet i dokumentet (lenke eller knapp), genereres en hendelse som, i samsvar med instruksjonene skrevet på CSS-språket, ber nettleseren om å endre et bilde til et annet. Når musemarkøren flyttes vekk fra knappen, skjer den omvendte erstatningen.
Nødvendig
Grunnleggende kunnskaper om HTML- og CSS-språk
Bruksanvisning
Trinn 1
Det er flere alternativer for å implementere en slik fremhevingsmekanisme. For noen av dem kan du bruke den samme HTML-koden, og bare endre den tilsvarende stilbeskrivelsen. HTML-koden til knappen kan se slik ut: tekst på knappen Her er identifikatoren for dette sideelementet (id = "btnA") som stilbeskrivelsen vil være knyttet til.
Steg 2
For å implementere ett av alternativene, må du forberede to bilder, hvorav den ene viser knappen i inaktiv tilstand, og den andre med bakgrunnsbelysning. De vil bli brukt som bakgrunnsbilde av lenken. CSS-instruksjonene for denne knappen kan se slik ut:
a # btnA, a # btnA: besøkt {
skjerm: blokk;
bredde: 50px;
høyde: 20px;
bakgrunn: url (btnA.gif) no-repeat;
grense: 0;
}
a # btnA: sveve {
bakgrunn: url (btnA_hover.gif) no-repeat;
grense: 0;
}
Her, i den første blokken, er dimensjonene til bildet som viser knappen angitt (bredde: 50px; høyde: 20px;). Du må erstatte dem med dimensjonene på bildet ditt. Navnene på bildefilene bør endres på samme måte: btnA.
Trinn 3
Et alternativ er å sette begge bildene i ett bilde. Det kan være hver over hverandre, eller det kan være ved siden av hverandre. Den vil også bli brukt som bakgrunn for lenken. Siden knappestørrelsene er spesifisert i beskrivelsen av knappestilen, vil ikke alt som ikke passer inn i dem være synlig. I dette tilfellet bør instruksjonene i CSS-beskrivelsen, når du holder musepekeren, rulle bakgrunnsbildet slik at området med bildet av den uthevede knappen faller inn i rammen. For dette alternativet må koden fra forrige trinn endres som følger:
a # btnA, a # btnA: besøkt {
display: blokk;
bredde: 50px;
høyde: 20px;
bakgrunn: url (btnA.gif) no-repeat;
grense: 0;
}
a # btnA: sveve {
bakgrunn: url (btnA.gif) no-repeat 21px;
grense: 0;
}
Dette forutsetter at du har plassert bildene over hverandre (uthevet nederst) og lagret i en fil som heter btnA.gif. Høyden på knappene er 20 px, bredden er 50 px - du må erstatte disse verdiene med dine egne.
