Baggrundsbelysning af knapper på websider er normalt organiseret ved hjælp af to billeder. Når du holder musemarkøren over det tilsvarende element i dokumentet (link eller knap), genereres en begivenhed, der i overensstemmelse med instruktionerne skrevet på CSS-sproget beder browseren om at skifte et billede til et andet. Når musemarkøren flyttes væk fra knappen, sker den omvendte udskiftning.
Nødvendig
Grundlæggende kendskab til HTML- og CSS-sprog
Instruktioner
Trin 1
Der er flere muligheder for at implementere en sådan fremhævningsmekanisme. For enhver af dem kan du bruge den samme HTML-kode og kun ændre den tilsvarende stilbeskrivelse. Knappens HTML-kode kan se sådan ud: tekst på knappen Her er identifikatoren for dette sideelement (id = "btnA"), som stilbeskrivelsen vedhæftes.
Trin 2
For at implementere en af mulighederne skal du forberede to billeder, hvoraf den ene viser knappen i inaktiv tilstand, og den anden med baggrundslys. De vil blive brugt som baggrundsbillede af linket. CSS-instruktionerne til denne knap kan se sådan ud:
a # btnA, a # btnA: besøgte {
display: blok;
bredde: 50px;
højde: 20px;
baggrund: url (btnA.gif) ingen gentagelse;
grænse: 0;
}
a # btnA: svæver {
baggrund: url (btnA_hover.gif) ingen gentagelse;
grænse: 0;
}
Her, i den første blok, er dimensionerne på billedet, der viser knappen, angivet (bredde: 50px; højde: 20px;). Du skal erstatte dem med dimensionerne på dit billede. Navnene på billedfilerne skal ændres på samme måde: btnA.
Trin 3
Et alternativ er at sætte begge billeder i et billede. Det kan være over hinanden, eller det kan være ved siden af hinanden. Det vil også blive brugt som baggrund for linket. Da knappestørrelserne er specificeret i beskrivelsen af knappen, vil alt, der ikke passer ind i dem, ikke være synligt. I dette tilfælde skal instruktionerne i CSS-beskrivelsen, når du holder musemarkøren, rulle baggrundsbilledet, så området med billedet af den fremhævede knap falder ind i rammen. For denne mulighed skal koden fra det forrige trin ændres som følger:
a # btnA, a # btnA: besøgte {
display: blok;
bredde: 50px;
højde: 20px;
baggrund: url (btnA.gif) ingen gentagelse;
grænse: 0;
}
a # btnA: svæver {
baggrund: url (btnA.gif) no-repeat 21px;
grænse: 0;
}
Dette forudsætter, at du har placeret billederne oven over hinanden (fremhævet nederst) og gemt i en fil kaldet btnA.gif. Knappernes højde er 20 pixel, bredden er 50 pixel - du skal erstatte disse værdier med dine egne.
