Jak Zvýraznit šipky

Obsah:

Jak Zvýraznit šipky
Jak Zvýraznit šipky

Video: Jak Zvýraznit šipky

Video: Jak Zvýraznit šipky
Video: MALL BOXING s Pedrem: Šipky #19 2024, Březen
Anonim

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ší.

Jak zvýraznit šipky
Jak zvýraznit šipky

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.

Doporučuje: