Možnosti odkazů

V tomto textu se pokusím nastínit vylepšení odkazů, zejména pokud se přejedou myší. Předpokládám, že znáte použití odkazů v HTML. Jinde popisuji cílové okno, relativní adresy a kotvy .

Barva odkazů pomocí CSS - Pseudotřída :hover - Bez podtržení - Obrázky v odkazech - Měnící se obrázky - Bublina u textu - Přepnutí do nového okna - Barva po staru

Barva odkazů pomocí CSS

Když vložíte do hlavičky dokumentu stylopis (anglicky stylesheet), můžete ovlivnit veškeré formátování stránky. Takže i barvu odkazů. Jak se stylopis píše:

Stylopis patří do hlavičky (dovnitř tagu <head>). Kdyžtak mrkněte na návod, jak se CSS používají. V příkladu a:link znamená nenavštívený odkaz (bude modrý, blue), a:visited je navštívený odkaz a a:active je odkaz, na který se zrovna kliklo (takže prakticky není vidět, protože prohlížeč obvykle skoro hned přejde na jinou stránku).

Pomocí CSS stylů se dá odkazům přiřadit mnoho různých formátovacích vlastností, například aby všechny odkazy byly tučné a nepodtržené:

a {font-weight: bold; text-decoration: none}

Výchozí barvy odkazů

Pokud barvy odkazů nenastavíte, záležejí barvy na nastavení prohlížeče (nejčastěji jsou stejné jako v uvedeném příkladu: modrá, fialová a červená).

Pseudotřída :hover

V předchozím příkladu jsem použil CSS a pseudotřídy u odkazů (pseudotřída začíná dvojtečkou, to je to :link, :visited). Prohlížeče umějí také pseudotřídu a:hover, která označuje odkaz, přes který se zrovna přejíždí myší. Když tedy napíšu do stylopisu další řádek

a:hover { color: orange}

budou všechny odkazy při přejíždění myší měnit barvu na oranžovou.

Barva není jediná věc, která se dá u odkazů měnit. Obzvlášť hezky vypadá, když se nadeklaruje barva pozadí, vnitřní okraj (padding) a rámeček (border). Odkaz pak vypadá třeba jako tlačítko. Dále se často mění obrázek na pozadí nebo barva pozadí. To lze CSS vlastnostmi background-image a background-color. Mrkněte pro inspiraci na soupis všech CSS vlastností.

Pseudotřída :hover se dá přibližně od roku 2010 používat i pro jiné prvky než jsou odkazy (tedy než tag <a>). Vzhled při najetí myší tak lze měnit u různých věcí, praktické je to například u řádků tabulky, kterým se při najetí dá měnit barva pozadí.

Pozor, nikdy na :hover nespoléhejte. Telefony nemají myš, takže na nich hover nefunguje! Pokud nějakou informaci necháte viditelnou jen v případě přejetí myší, utajíte ji uživatelům mobilů, kterých už je ale víc než polovina! (2022) Na hraní s barvičkami je hover fajn, na sdělování informací úplně blbě.

Bez podtržení

Pomocí CSS se dá u odkazů ovlivnit nejenom barva, ale spousta jiných věcí. Zejména se dá vypnout podtrhávání. Zápis je:

Fungovalo by to, i kdyby se před závorku dalo jenom a (prostý odkaz). Podrobněji rozebírám v textu o praktickém použití CSS, můžete se také podívat na příklad.

Rušit podtrhávání odkazů je mimochodem dost blbý nápad. Prakticky se hodí jenom v různých navigačních lištách, kde je klikatelnost textu zřejmá i jinak než podtržením. Jinak se uživatelé podle podtrhávaného textu velmi dobře orientují, na co jde kliknout. Jsou na podtrhávání zvyklí, takže odkazy v textu prosím nechte podtrhané. Je to ostatně i výchozí chování prohlížečů.

Kromě zápisu a:link, a:visited je možno nově (asi od roku 2020) používat zápis a:any-link.

Obrázky v odkazech

Do odkazu se dá umístit cokoliv, třeba celá kapitola (jen ne další odkaz). Často a rády se tam dávají obrázky, takhle nějak to vypadá ve zdroji:

Kde to <a href...> je odkaz a to <img ...> je obrázek. Všimněte si, že obrázek je odkazem obalený. Koncová značka </a> odkaz uzavírá. Jiný příklad:

Po obalení odkazem celý obrázek funguje jako odkaz.

Aby kolem obrázku nebyl rámeček, musí se zadat border="0". Výchozí chování prohlížečů je takové, že kolem obrázků v odkazu rámeček zobrazují, aby bylo zřejmé, že jde o odkaz. Nulový rámeček se krom zápisu border="0" dá zadat pro celou stránku najednou pomocí CSS:

Příklad říká, že když je jakýkoli obrázek v odkazu (a img), nebude mít rámeček. Je to tedy alternativa pro border="0".

Je dobré do obrázku vyplnit parametr alt, aby bylo zřejmé, co je na obrázku vidět, i když se obrázek zatím nestáhne nebo když ho uživatel nemůže vidět. Dříve se obsah parametru alt ještě chybně zobrazoval v Internet Exploreru při přejetí myší ve žluté bublině nad obrázkem. Taková bublina se nyní dá udělat i nad libovolným textem pomocí atributu title.

Obrázku je vhodné zadat rozměry (v příkladu parametry width a height), aby stránka při načítání blbě neposkakovala.

Měnící se obrázky

Dá se zařídit, aby se obrázky po přejetí myši změnily. Buďto jednoduše pomocí CSS a filtrů, nebo složitě pomocí JavaScriptu.

CSS + pozadí

Do stylopisu se dá:

a.menici {background-image: url(prvni.gif)}
a.menici:hover {background-image: url(druhy.gif)}

a odkaz se zapíše:

<a class="menici" href="kamkoliv">měnící se odkaz</a>

Zobrazit příklad.

Pixiho vylepšení = sprites

Předchozí příklad má problém v tom, že obsahuje dva obrázky. Ve chvíli, kdy myš přejede obrázek, je najednou potřeba druhý obrázek, který ale zrovna v tu chvíli ale není stažený. Dříve se to řešilo různými skripty (preloadery), ale Petr Staníček (Pixy) vymyslel pěkný trik a stal se díky tomu slavným. Udělal si pro pozadí odkazu obrázek, který obsahoval oba grafické stavy. Při přejetí myši jenom šoupe pozicí obrázku (background-position). Později se téhle technice začalo říkat sprites. Tento příklad tady nemám, protože jsem líný ho udělat. Tak ty starší způsoby:

CSS + filtry

Odstraněno, časem přestalo fungovat. Jenom dobře.

JavaScriptem

Omezím se na praktické použití. Teorie je na víc stran a nechce se mi to tu probírat. Je potřeba připravit si dva obrázky (nejlépe stejné velikosti), v tomto příkladu je nazývám první.gif a druhy.gif:

Živá ukázka:

Samozřejmě, že si můžete obrázků připravit víc a lze použít také události onclick, ondblclick atd. atd.

Aby druhý obrázek při přejíždění neproblikával, dá se načíst dopředu, říká se tomu preload.

Tento příklad záměny obrázku při přejetí myší se ve skutečnosti obejde úplně bez odkazu. V tomto článku ho nechávám z historických důvodů.

Bublina u textu

Občas se můžete setkat s malou hranatou žlutou bublinou nad textem, který přejíždíte myší. Říká se tomu nejčastěji tooltip a dá se to udělat atributem title:

<a href="cil_odkazu.html" title="doplňující informace do bubliny">text odkazu</a>

Prohlížeče můžou teoreticky atribut title používat i jinak. Například přidá-li si uživatel Internet Exploreru odkaz do oblíbených (pravým tlačítkem > přidat k oblíbeným), nabídne se automaticky text atributu title jako výchozí pojmenování položky (jinak se nabídne text odkazu).

V dávných internetových dobách se bubliny ve starších prohlížečích daly udělat pouze u obrázků pomocí atributu alt. V tomto textu to uvádím, protože nejlepší je dávat tooltip do odkazů, aby člověk věděl, co jej čeká po kliknutí.

Přepnutí do nové karty (okna)

Při procházení webem se občas dostanu do situace, že nechci nějakou stránku opustit, a přece chci zároveň přejít na novou. Dělám to různě, například

pomocí pravého tlačítka příkazem "otevřít odkaz na nové kartě" (open in new tab)
kliknutím s podrženým Ctrl
kliknutím prostředním tlačítkem.

Odkazovaná stránka se pak objeví v nové kartě. Ještě odbočka k vyjasnění pojmů:

Ouško = karta = záložka = panel = tab

Zmatek v terminologii přinášejí různé překlady prohlížečů. V praxi to vypadá jako ouško nahoře v přohlížeči s titulkem stránky a zavíracím křížkem. Chrome tomu říká karta, Explorer záložka, Firefox panel.

Tři záložky v prohlížeči Chrome a tři záložky v prohlížeži Edge:

V dávných dobách prohlížečů ještě prohlížeče neměly karty, takže se podobné věci daly otevírat v různých oknech prohlížeče.

Atribut target

Kromě toho, že si uživatel může sám zvolit, že si odkaz otevře v nové kartě, je také možno určit, že se odkaz bude do nové karty otevírat automaticky. Dělá se to pomocí atributu target, jemuž se přiřadí hodnota "_blank".

<a href="http://www.seznam.cz" target="_blank">

Toto je zápis odkazu, který v nové kartě prohlížeče zobrazí český portál Seznam.

(Jako hodnota atributu target se může použít jméno nějakého rámu, přičemž hodnota _blank je označní pro prázdný rám, ale to bych už moc odbočoval k teorii rámů. Target pro všechny odkazy na stránce se dají nastavit také všechny najednou jedním tagem <base target="_blank">, pak se budou všechny odkazy na stránce otevírat v nové kartě. Tento tag se dává do hlavičky.)

Doporučení

Pokud nemáte nějaký zásadní důvod, proč chcete, aby se odkazovaná stránka otevírala v nové kartě, atribut target nezadávejte. Uživatelé, kteří karty (panely, ouška) chápou, si zpravidla dokážou otevřít novou kartu sami. Naopak uživatelé, kteří karty nechápou, mohou být po otevření nové karty velmi zmateni, protože jim pak v prohlížeči nefunguje tlačítko zpět.

Barva odkazů po staru

Barvy odkazů se v HTML kdysi dávno definovala jako atribut tagu body. Občas se s tím ještě můžete setkat:

Link znamená barvu nenavštíveného odkazu, vlink navštíveného a alink znanená aktivní odkaz. Deklarace barev tímto způsobem se od 4. verze HTML považuje za zastaralou a její používání se nedoporučuje. Sice funguje, ale mají se používat CSS styly.

Pro zajímavost: toto je druhá nejstarší stránka z tohoto webu. Starší byly už jenom meta tagy.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně