Na usporiadanie navigácie sa zvyčajne používajú grafické šípky na webových stránkach. Kliknutím na takýto ukazovateľ prejdete na inú stránku alebo do inej časti aktuálnej stránky. Niekedy sú s nimi spojené niektoré akcie - zvýraznenie obsahu poľa značky, spustenie skriptu JavaScript atď. Ak chcete zdôrazniť, že táto šípka je aktívnym prvkom, použite efekt „zvýraznenie“, t.j. zmeny vzhľadu pri prejdení myšou.
Nevyhnutné
Základné znalosti jazykov HTML a CSS
Inštrukcie
Krok 1
Určite, ktorý mechanizmus implementácie zvýraznenia šípky je pre vás ten najlepší. Existuje niekoľko z nich, dve jednoduché sú uvedené v ďalších krokoch tohto pokynu. Obaja používajú pseudotriedu vznášania CSS. Keď je kurzor myši nad grafickým prvkom (šípka), použije sa na neho štýl opísaný v tejto pseudotriede a po zvyšok času tento štýl nie je aktívny. Pre obe možnosti popísané nižšie môžete použiť rovnaký kód HTML kód, ale rôzne popisy štýlov. Kód šípky v zdroji stránky je možné zapísať takto: Atribút id určuje identifikátor odkazu (arrowA), podľa ktorého prehliadač určí, ktorý z popisov štýlov by sa mal na neho použiť.
Krok 2
Prvá možnosť bude vyžadovať, aby ste pripravili dva obrázky šípok - s podsvietením a bez neho. Uložte ich do súborov s názvami ako arrON.
a # arrowA, a # arrowA: navštívené {
displej: blok;
výška: 30px;
šírka: 100px;
pozadie: url (arrOFF.gif) no-repeat;
ohraničenie: 0;
}
a # arrowA: hover {
pozadie: url (arrON.gif) no-repeat;
ohraničenie: 0;
}
Prvý blok obsahuje rozmery šípky (výška: 30px; šírka: 100px;) - nahraďte ich rozmermi pripravených obrázkov šípky.
Krok 3
Druhá možnosť vám umožní vystačiť si iba s jedným súborom obrázka. Musíte do nej umiestniť oba obrázky šípky - zvýraznené aj neaktívne. Môžete ich umiestniť vedľa seba, môžete nad seba. Vo vzorovom kóde budeme predpokladať, že zvýraznená šípka je umiestnená pod neaktívnym a váš súbor má názov arr.gif. Tento obrázok, rovnako ako v predchádzajúcej verzii, sa používa ako pozadie odkazu. Pretože rozmery objektu sú uvedené v popise štýlu, celý zvyšok pozadia (zvýraznená šípka), ktoré sa do nich nezmestí, nebude pre webového surfistu viditeľný. V popise umiestnenia kurzora pseudo štýlu je určený posun v umiestnení obrázka na pozadí, takže pri umiestnení kurzora myši na odkaz sa zobrazí ďalšia časť a teraz sa pasívna šípka zobrazí „mimo obrazovku“.
a # arrowA, a # arrowA: navštívené {
displej: blok;
šírka: 100px;
výška: 30px;
pozadie: url (arr.gif) no-repeat;
ohraničenie: 0;
}
a # arrowA: hover {
pozadie: url (arr.gif) no-repeat 31px;
ohraničenie: 0;
}
Nezabudnite tiež tu zmeniť veľkosť.
