Podsvietenie tlačidiel na webových stránkach je zvyčajne organizované pomocou dvoch obrázkov. Keď umiestnite kurzor myši na zodpovedajúci prvok dokumentu (odkaz alebo tlačidlo), vygeneruje sa udalosť, ktorá v súlade s pokynmi napísanými v jazyku CSS vyzve prehliadač na zmenu jedného obrázka za iný. Keď sa kurzor myši posunie od tlačidla, dôjde k spätnej výmene.
Nevyhnutné
Základné znalosti jazykov HTML a CSS
Inštrukcie
Krok 1
Existuje niekoľko možností implementácie takéhoto zvýrazňovacieho mechanizmu. Pre ktorékoľvek z nich môžete použiť rovnaký kód HTML, pričom zmeníte iba zodpovedajúci popis štýlu. HTML kód tlačidla môže vyzerať takto: text na tlačidle Tu je identifikátor tohto prvku stránky (id = "btnA"), ku ktorému bude pripojený popis štýlu.
Krok 2
Ak chcete implementovať jednu z možností, musíte si pripraviť dva obrázky, z ktorých jeden zobrazuje tlačidlo v neaktívnom stave a druhý podsvietenie. Budú použité ako obrázok na pozadí odkazu. Pokyny pre CSS pre toto tlačidlo môžu vyzerať takto:
a # btnA, a # btnA: navštívené {
displej: blok;
šírka: 50px;
výška: 20px;
pozadie: url (btnA.gif) no-repeat;
ohraničenie: 0;
}
a # btnA: hover {
pozadie: url (btnA_hover.gif) no-repeat;
ohraničenie: 0;
}
Tu sú v prvom bloku uvedené rozmery obrázka zobrazujúceho tlačidlo (šírka: 50px; výška: 20px;). Musíte ich nahradiť rozmermi vášho obrázka. Názvy obrazových súborov by sa mali meniť rovnakým spôsobom: btnA.
Krok 3
Jednou z alternatív je spojiť obidva obrázky do jedného. Môže to byť jeden nad druhým alebo môže byť vedľa seba. Tiež sa použije ako pozadie odkazu. Pretože veľkosti tlačidiel sú uvedené v popise štýlu tlačidiel, nebude viditeľné všetko, čo sa do nich nezmestí. V takom prípade by pokyny umiestnené v popise CSS mali pri umiestnení kurzora myši posúvať obrázok na pozadí tak, aby oblasť s obrázkom zvýrazneného tlačidla padla do rámčeka. Pre túto možnosť musí byť kód z predchádzajúceho kroku zmenený takto:
a # btnA, a # btnA: navštívené {
displej: blok;
šírka: 50px;
výška: 20px;
pozadie: url (btnA.gif) no-repeat;
ohraničenie: 0;
}
a # btnA: hover {
pozadie: url (btnA.gif) no-repeat 21px;
ohraničenie: 0;
}
Predpokladá sa, že ste obrázky umiestnili nad seba (zvýraznené dole) a uložili do súboru s názvom btnA.gif. Výška tlačidiel je 20px, šírka je 50px - musíte tieto hodnoty nahradiť vlastnými.
