Achtergrondverligting van knoppies op webblaaie word gewoonlik georganiseer met behulp van twee beelde. As u die muisaanwyser oor die ooreenstemmende element van die dokument hou (skakel of knoppie), word 'n gebeurtenis gegenereer wat volgens die instruksies in die CSS-taal die blaaier vra om een beeld na 'n ander te verander. Wanneer die muiswyser van die knoppie af wegbeweeg word, vind die omgekeerde vervanging plaas.
Nodig
Basiese kennis van HTML- en CSS-tale
Instruksies
Stap 1
Daar is verskeie opsies om so 'n uitligmeganisme te implementeer. Vir een van hulle kan u dieselfde HTML-kode gebruik en slegs die ooreenstemmende stylbeskrywing verander. Die HTML-kode van die knoppie kan so lyk: teks op die knoppie Hier is die identifiseerder van hierdie bladsy-element (id = "btnA") waaraan die stylbeskrywing geheg sal word.
Stap 2
Om een van die opsies te implementeer, moet u twee foto's voorberei, waarvan een die knoppie in onaktiewe toestand toon, en die tweede met 'n agterlig. Dit sal gebruik word as agtergrond van die skakel. Die CSS-instruksies vir hierdie knoppie kan so lyk:
a # btnA, a # btnA: besoek {
vertoon: blok;
breedte: 50px;
hoogte: 20px;
agtergrond: url (btnA.gif) no-repeat;
grens: 0;
}
a # btnA: sweef {
agtergrond: url (btnA_hover.gif) no-repeat;
grens: 0;
}
Hier, in die eerste blok, word die afmetings van die prentjie wat die knoppie voorstel aangedui (breedte: 50px; hoogte: 20px;). U moet dit vervang deur die afmetings van u prentjie. Die name van die beeldlêers moet op dieselfde manier verander word: btnA.
Stap 3
Een alternatief is om albei beelde in een prentjie te plaas. Dit kan een bo die ander wees, of dit kan langs mekaar wees. Dit sal ook as agtergrond vir die skakel gebruik word. Aangesien die knoppiegroottes in die beskrywing van die knoppiestyl gespesifiseer word, sal alles wat nie daarin pas nie, nie sigbaar wees nie. In hierdie geval moet die instruksies in die CSS-beskrywing, wanneer u die muisaanwyser hou, die agtergrondafbeelding rol, sodat die area met die beeld van die gemerkte knoppie in die raam val. Vir hierdie opsie moet die kode van die vorige stap soos volg verander word:
a # btnA, a # btnA: besoek {
vertoon: blok;
breedte: 50px;
hoogte: 20px;
agtergrond: url (btnA.gif) no-repeat;
grens: 0;
}
a # btnA: sweef {
agtergrond: url (btnA.gif) no-repeat 21px;
grens: 0;
}
Dit veronderstel dat u die beelde bo-op mekaar geplaas het (onderaan gemerk) en in 'n lêer genaamd btnA.gif"
