Achtergrondverlichting van knoppen op webpagina's wordt meestal georganiseerd met behulp van twee afbeeldingen. Wanneer u de muiscursor over het overeenkomstige element van het document (link of knop) beweegt, wordt een gebeurtenis gegenereerd die, in overeenstemming met de instructies in de CSS-taal, de browser ertoe aanzet om de ene afbeelding in de andere te veranderen. Wanneer de muiscursor van de knop wordt verwijderd, vindt de omgekeerde vervanging plaats.
Noodzakelijk
Basiskennis van HTML- en CSS-talen
instructies:
Stap 1
Er zijn verschillende opties om een dergelijk markeringsmechanisme te implementeren. Voor elk van hen kunt u dezelfde HTML-code gebruiken, waarbij u alleen de bijbehorende stijlbeschrijving wijzigt. De HTML-code van de knop kan er als volgt uitzien: tekst op de knop Hier is de identifier van dit pagina-element (id = "btnA") waaraan de stijlbeschrijving zal worden gekoppeld.
Stap 2
Om een van de opties te implementeren, moet u twee afbeeldingen voorbereiden, waarvan er één de knop in een inactieve staat toont en de tweede met achtergrondverlichting. Ze worden gebruikt als achtergrondafbeelding van de link. De CSS-instructies voor deze knop kunnen er als volgt uitzien:
een # btnA, een # btnA: bezocht {
weergave: blok;
breedte: 50px;
hoogte: 20px;
achtergrond: url (btnA.gif) geen herhaling;
grens: 0;
}
a # btnA: zweef {
achtergrond: url (btnA_hover.gif) niet herhalen;
grens: 0;
}
Hier, in het eerste blok, worden de afmetingen van de afbeelding van de knop aangegeven (breedte: 50px; hoogte: 20px;). U moet ze vervangen door de afmetingen van uw afbeelding. De namen van de afbeeldingsbestanden moeten op dezelfde manier worden gewijzigd: btnA.
Stap 3
Een alternatief is om beide afbeeldingen in één afbeelding te plaatsen. Het kan boven elkaar staan, maar ook naast elkaar. Het wordt ook gebruikt als achtergrond voor de link. Omdat de grootte van de knop is gespecificeerd in de beschrijving van de knopstijl, is alles wat er niet in past niet zichtbaar. In dit geval moeten de instructies in de CSS-beschrijving, wanneer u de muisaanwijzer beweegt, door de achtergrondafbeelding scrollen zodat het gebied met de afbeelding van de gemarkeerde knop in het frame valt. Voor deze optie moet de code uit de vorige stap als volgt worden gewijzigd:
een # btnA, een # btnA: bezocht {
weergave: blok;
breedte: 50px;
hoogte: 20px;
achtergrond: url (btnA.gif) geen herhaling;
grens: 0;
}
a # btnA: zweef {
achtergrond: url (btnA.gif) no-repeat 21px;
grens: 0;
}
Dit veronderstelt dat je de afbeeldingen boven elkaar hebt geplaatst (onderaan gemarkeerd) en hebt opgeslagen in een bestand met de naam btnA.gif. De hoogte van de knoppen is 20px, de breedte is 50px - u moet deze waarden vervangen door uw eigen waarden.
