Bakgrundsbelysning av knappar på webbsidor organiseras vanligtvis med två bilder. När du håller muspekaren över motsvarande element i dokumentet (länk eller knapp) genereras en händelse som i enlighet med instruktionerna skrivna på CSS-språket uppmanar webbläsaren att ändra en bild till en annan. När muspekaren flyttas bort från knappen inträffar det omvända utbytet.
Nödvändig
Grundläggande kunskaper i HTML- och CSS-språk
Instruktioner
Steg 1
Det finns flera alternativ för att implementera en sådan markeringsmekanism. För någon av dem kan du använda samma HTML-kod och endast ändra motsvarande stilbeskrivning. Knappens HTML-kod kan se ut så här: text på knappen Här är identifieraren för detta sidelement (id = "btnA") som stilbeskrivningen kommer att bifogas.
Steg 2
För att implementera ett av alternativen måste du förbereda två bilder, varav en visar knappen i inaktivt tillstånd och den andra med bakgrundsbelysning. De kommer att användas som bakgrundsbild för länken. CSS-instruktionerna för den här knappen kan se ut så här:
a # btnA, a # btnA: besökte {
display: blockera;
bredd: 50px;
höjd: 20px;
bakgrund: url (btnA.gif) no-repeat;
gräns: 0;
}
a # btnA: sväva {
bakgrund: url (btnA_hover.gif) no-repeat;
gräns: 0;
}
Här, i det första blocket, anges dimensionerna på bilden som visar knappen (bredd: 50px; höjd: 20px;). Du måste ersätta dem med måtten på din bild. Namnen på bildfilerna bör ändras på samma sätt: btnA.
Steg 3
Ett alternativ är att placera båda bilderna i en bild. Det kan vara över varandra, eller så kan det vara bredvid varandra. Den kommer också att användas som bakgrund för länken. Eftersom knappstorlekarna anges i beskrivningen av knappstilen, kommer allt som inte passar in i dem inte att visas. I det här fallet bör instruktionerna i CSS-beskrivningen, när du håller muspekaren, bläddra i bakgrundsbilden så att området med bilden av den markerade knappen faller in i ramen. För detta alternativ måste koden från föregående steg ändras på följande sätt:
a # btnA, a # btnA: besökte {
display: blockera;
bredd: 50px;
höjd: 20px;
bakgrund: url (btnA.gif) no-repeat;
gräns: 0;
}
a # btnA: sväva {
bakgrund: url (btnA.gif) no-repeat 21px;
gräns: 0;
}
Detta förutsätter att du har placerat bilderna ovanför varandra (markerade längst ner) och sparat i en fil som heter btnA.gif. Knapparnas höjd är 20 pixlar, bredden är 50 pixlar - du måste ersätta dessa värden med dina egna.
