A weboldalakon található gombok háttérvilágítása általában két kép felhasználásával szerveződik. Amikor az egérmutatót a dokumentum megfelelő eleme (hivatkozás vagy gomb) fölé viszi, egy esemény jön létre, amely a CSS nyelven írt utasításoknak megfelelően arra kéri a böngészőt, hogy egyik képet másikra cserélje. Amikor az egér kurzor eltávolodik a gombról, a fordított cseréje következik be.
Szükséges
HTML és CSS nyelvek alapismerete
Utasítás
1. lépés
Számos lehetőség van egy ilyen kiemelő mechanizmus megvalósítására. Bármelyiknél ugyanazt a HTML-kódot használhatja, csak a megfelelő stílusleírást módosítva. A gomb HTML-kódja így nézhet ki: szöveg a gombon Itt található ennek az oldalelemnek az azonosítója (id = "btnA"), amelyhez a stílusleírás csatolásra kerül.
2. lépés
Az egyik lehetőség megvalósításához két képet kell készítenie, amelyek közül az egyik inaktív állapotban mutatja a gombot, a másik pedig háttérvilágítással. Ezeket a link háttérképeként használják. A gomb CSS-utasításai így nézhetnek ki:
a # btnA, a # btnA: meglátogatott {
kijelző: blokk;
szélesség: 50px;
magasság: 20px;
háttér: url (btnA.gif) nem ismételhető;
határ: 0;
}
a # btnA: hover {
háttér: url (btnA_hover.gif) no-repeat;
határ: 0;
}
Itt, az első blokkban a gombot ábrázoló kép méretei vannak feltüntetve (szélesség: 50px; magasság: 20px;). Ki kell cserélni őket a kép méreteivel. A képfájlok nevét ugyanúgy kell megváltoztatni: a btnA.
3. lépés
Az egyik alternatíva mindkét kép egy képbe foglalása. Lehet egymás fölött, vagy lehet egymás mellett. A link háttereként is használható lesz. Mivel a gombméretek a gombstílus leírásában vannak megadva, minden, ami nem fér bele, nem lesz látható. Ebben az esetben a CSS leírásban elhelyezett utasításoknak az egér kurzor lebegtetésekor görgetniük kell a háttérképet, hogy a kiemelt gomb képével ellátott terület a keretbe essen. Ehhez az opcióhoz az előző lépés kódját a következőképpen kell megváltoztatni:
a # btnA, a # btnA: meglátogatott {
kijelző: blokk;
szélesség: 50px;
magasság: 20px;
háttér: url (btnA.gif) nem ismételhető;
határ: 0;
}
a # btnA: hover {
háttér: url (btnA.gif) nem ismételje meg a 21 képpontot;
határ: 0;
}
Ez azt feltételezi, hogy a képeket egymás fölé helyezte (alul kiemelve), és elmentette a btnA.gif"
