K organizaci navigace se obvykle používají grafické šipky na webových stránkách. Kliknutím na takový ukazatel přejdete na jinou stránku nebo do jiné části aktuální stránky. Někdy jsou s nimi spojeny některé akce - zvýraznění obsahu pole značky, spuštění skriptu JavaScript atd. Chcete-li zdůraznit, že tato šipka je aktivním prvkem, použijte efekt „zvýraznění“, tj. změny vzhledu při přejetí myší.
Nezbytné
Základní znalost jazyků HTML a CSS
Instrukce
Krok 1
Určete, který mechanismus pro implementaci zvýraznění šipky je pro vás nejlepší. Existuje několik z nich, dva jednoduché jsou uvedeny v následujících krocích této instrukce. Oba používají pseudotřídu přechodu CSS. Když je kurzor myši nad grafickým prvkem (šipka), použije se na něj styl popsaný v této pseudotřídě a po zbytek času nebude tento styl aktivní. U obou níže popsaných možností můžete použít stejný HTML kód, ale různé popisy stylů. Kód šipky ve zdroji stránky lze zapsat takto: Atribut id určuje identifikátor odkazu (arrowA), podle kterého prohlížeč určí, který z popisů stylů by měl být na něj použit.
Krok 2
První možnost vyžaduje, abyste připravili dva obrázky šipek - s podsvícením i bez něj. Uložte je do souborů s názvy jako arrON.
a # arrowA, a # arrowA: navštíveno {
displej: blok;
výška: 30px;
šířka: 100px;
pozadí: url (arrOFF.gif) no-repeat;
ohraničení: 0;
}
a # arrowA: hover {
pozadí: url (arrON.gif) no-repeat;
ohraničení: 0;
}
První blok obsahuje rozměry šipky (výška: 30px; šířka: 100px;) - nahraďte je rozměry připravených obrázků šipek.
Krok 3
Druhá možnost vám umožní vystačit si pouze s jedním souborem obrázku. Musíte do něj umístit oba obrázky šipky - zvýrazněné i neaktivní. Můžete je umístit vedle sebe, můžete jeden nad druhým. V ukázkovém kódu budeme předpokládat, že zvýrazněná šipka je umístěna pod neaktivní a váš soubor má název arr.gif. Tento obrázek, stejně jako v předchozí verzi, se používá jako pozadí odkazu. Vzhledem k tomu, že rozměry objektu jsou uvedeny v popisu stylu, nebude celý surfař webu viditelný celý zbytek pozadí (zvýrazněná šipka), který se do nich nevejde. V popisu přechodu pseudo stylu je určen posun v umístění obrázku na pozadí, takže když podržíte kurzor nad odkazem, zobrazí se další část a nyní se pasivní šipka zobrazí „mimo obrazovku“.
a # arrowA, a # arrowA: navštíveno {
displej: blok;
šířka: 100px;
výška: 30px;
pozadí: url (arr.gif) no-repeat;
ohraničení: 0;
}
a # arrowA: hover {
pozadí: url (arr.gif) no-repeat 31px;
ohraničení: 0;
}
Nezapomeňte také zde změnit velikost.
