Verkkosivujen painikkeiden taustavalo on yleensä järjestetty kahdella kuvalla. Kun viet hiiren kohdistimen asiakirjan vastaavan osan (linkki tai painike) päälle, syntyy tapahtuma, joka CSS-kielellä kirjoitettujen ohjeiden mukaisesti kehottaa selainta vaihtamaan kuvan toiseen. Kun hiiren kohdistinta siirretään poispäin painikkeesta, korvaus tapahtuu päinvastaisessa järjestyksessä.
Välttämätön
Perustiedot HTML- ja CSS-kielistä
Ohjeet
Vaihe 1
Tällaisen korostusmekanismin toteuttamiseksi on useita vaihtoehtoja. Missä tahansa niistä voit käyttää samaa HTML-koodia muuttamalla vain vastaavaa tyylikuvaa. Painikkeen HTML-koodi voi näyttää tältä: painikkeen teksti Tässä on tämän sivuelementin tunniste (id = "btnA"), johon tyylikuvaus liitetään.
Vaihe 2
Yhden vaihtoehdon toteuttamiseksi sinun on valmisteltava kaksi kuvaa, joista toisessa painike on passiivisessa tilassa ja toisessa taustavalo. Niitä käytetään linkin taustakuvana. Tämän painikkeen CSS-ohjeet saattavat näyttää tältä:
a # btnA, a # btnA: vieraili {
näyttö: lohko;
leveys: 50px;
korkeus: 20px;
tausta: url (btnA.gif) ei toista;
reuna: 0;
}
a # btnA: vie hiiri {
tausta: url (btnA_hover.gif) ei toista;
reuna: 0;
}
Tässä, ensimmäisessä lohkossa, ilmoitetaan painiketta kuvaavan kuvan mitat (leveys: 50 kuvapistettä; korkeus: 20 kuvapistettä;). Ne on korvattava kuvasi mitoilla. Kuvatiedostojen nimiä tulisi muuttaa samalla tavalla: btnA.
Vaihe 3
Yksi vaihtoehto on laittaa molemmat kuvat yhdeksi kuvaksi. Se voi olla yksi päällekkäin tai se voi olla vierekkäin. Sitä käytetään myös linkin taustana. Koska painikkeiden koot määritetään painikkeen tyylikuvassa, kaikki, jotka eivät sovi niihin, eivät ole näkyvissä. Tällöin CSS-kuvauksessa olevien ohjeiden tulisi hiiren kohdistinta vietäessä vierittää taustakuvaa siten, että korostetun painikkeen kuvan sisältävä alue putoaa kehykseen. Tätä vaihtoehtoa varten edellisen vaiheen koodi on muutettava seuraavasti:
a # btnA, a # btnA: vieraili {
näyttö: lohko;
leveys: 50px;
korkeus: 20px;
tausta: url (btnA.gif) ei toista;
reuna: 0;
}
a # btnA: vie hiiri {
tausta: url (btnA.gif) ei-toista 21 kuvapistettä;
reuna: 0;
}
Tämä olettaa, että olet sijoittanut kuvat päällekkäin (korostettu alareunassa) ja tallentanut tiedoston btnA.gif. Painikkeiden korkeus on 20 kuvapistettä, leveys 50 kuvapistettä - nämä arvot on korvattava omilla.
