Vylepšete si odkazy na svých www stránkách!

30. října 2000

•

Pokud jste alespoň zkušeným uživatelem Internetu, určitě jste již viděli stránky, kde při najetí kurzorem myši se odkaz zbarvil do jiné barvy, nebo se podtrhl či naopak odtrhnul, nebo se dají najít i stránky, kde se odkaz při najetí podtrhne dvakrát – nahoře a dole a takové tipy jsou námětem dnešního článku.

Barvy odkazu

První věc, kterou se dá dobře začít, je definice barvy odkazů. Pokud se vyznáte v HTML, určite víte, že existují tři druhy odkazů – nenavštívený (link), navštívený (vlink) a aktivní (alink). Jejich barvu můžete určit přímo v sekci Body anebo pomocí kaskádových stylů. V sekci Body:

Pomocí kaskádových stylů:

Nenavštívený, navštívený, aktivní

Změna barvy odkazu I.

Změnit barvu odkazu je poměrně jednoduché – v tomto případě si to ukážeme pomocí stylu. Nadefinujte si pomocí stylu barvu odkazu a pomocí pseudotřídy a:hover nadefinujte barvu odkazu jinou. Třeba takto:

Najeďte myší na tento odkaz

Jak je vidět, je to velmi jednoduché a změna barvy odkazu je docela efektní. Změna barvy odkazu vám bude fungovat v Internet Exploreru od verze 4.0, v Netscape Navigátoru to dodnes nejde, Opera 4.0 pseudotřídu a:hover podporuje a bude vám zde také fungovat.

Změna barvy odkazu II.

Druhou možností, jak změnit barvu odkazu, je využít událostí v JavaScriptu. Události můžou být různé, třeba najetí kurzorem myši, klepnutí tlačítka myši, dvojité klepnutí myší apod. a my pomocí událostí „onmouseover“ a „onmouseout“ barvu změníme:

<a href=“http://www.interval.cz“ onmouseover=“this.style.color=’Red'“ onmouseout=“this.style.color=’green'“>Najeďte myší na tento odkaz </a>

Najeďte myší na tento odkaz

Událost onmouseover definuje stav, kdy uživatel najede kurzorem nad odkaz. Událost onmouseout zase naopak definuje stav, kdy uživatel opustí oblast odkazu a pomocí this.style.color=’barva‘ změníme barvu. Opět – v Internet Exploreru toto funguje bez problémů, Netscape barvu odkazu nezmění, i kdyby se měl rozkrájet, v Opeře 4.0 final to nejde také, takže vám pro změnu barvy odkazu doporučuji kaskádové styly. Odkaz samozřejmě bude funkční.

Zrušení podtržení odkazu

U některého typu webu může vadit, že odkazy na stránkách jsou standardně podtrženy. Není nic snazšího pomocí stylu „text-decoration“ a hodnoty „none“ podtržení odkazu prostě zrušit tak, že se nebude potrhávat nikdy:

Toto je odkaz, který není podtržený.

Jak vidíte, je to velmi jednoduché. Pokud se rozhodnete mít odkazy bez podtržení, nezapomeňte je zvýraznit jiným způsobem, třeba barvou odlišnou od okolního textu. Stránky, kde jsou odkazy nepodtržené a také nijak nezvýrazněné, jsou vrcholem amatérismu, neboť jak má uživatel poznat, co je odkaz a co ne? Pro negativní příklad nemusím chodit daleko, takový www.toplist.cz nemá odkazy na úvodní stránce nijak zvýrazněné, a co je nejlepší, v levém modrém sloupci má text „Celkem započteno“, který je podtržen, ačkoli to není vůbec odkaz! Zmatení uživatele je tak dokonalé.

Podržení odkazu při najetí myši

V minulém příkladu jsem vám napsal, jak mít na stránkách nepodtržené odkazy. Pomocí stylu můžete dosáhnout stejně jednoduše efektu, kdy je odkaz v „klidovém stavu“ nepodtržený, ale při najetí kurzorem myši se podtrhne. Využijeme část, kterou jsem uvedl v předchozím příkladu a dodáme naši známou pseudotřídu „a:hover“ s parametrem „underline“, díky které se odkaz při najetí kurzorem myši podtrhne:

Toto je odkaz, který se podtrhne.

Odtržení odkazu při najetí myši

Pokud dokážete udělat, že se odkaz podtrhne při najetí myši (viz. minulý příklad), tak snadno dokážete přesný opak – zrušit podtržení odkazu při najetí myši, stačí přehodit „text-decoration:none“ a „text-decoration:underline“:

Toto je odkaz, kde se zruší podtržení .

Tento efekt jsem ovšem nikdy nepoužil, jeho použití je mi proti mysli. Podtržení odkazu – to ano, ale zrušení podtržení? To se mi nezdá. Ovšem – pokud se vám tento efekt libí, samozřejmě jej použijte a nenechte se zviklat mým názorem :)

Podržení odkazu nahoře

Věděli jste někdy, že je možné podtrhnout, či spíše „nadtrhnout“ odkaz i nahoře, tedy nejenom dole? Slouží k tomu parametr „overline“:

Toto je odkaz, který se podtrhne nahoře.

Logika „nadtržení“ odkazu nahoře mi není jasná. Pokud máte třeba odkaz na dvě věty, tak je to již dost nepřehledné. Funguje to v Internet Exploreru myslím od verze 4.0 a překvapivě i v Opeře 4.0. S tím „nadtržením“ se dá udělat docela zajímavý efekt – odkaz není vůbec podtržen a při najetí kurzorem myši se současně podtrhne nahoře i dole:

Toto je odkaz, který se podtrhne nahoře i dole.

Chvíli jsem sice zkoumal, jak udělat toto současné podtržení odkazu nahoře i dole, jak vidíte, přišel jsem na to, opravdu to jde, ale moc pěkně to nevypadá, a že to používá server www.mpx.cz, nic neznamená.

Přeškrtnutí odkazu

Přeškrtnutý odkaz se nevidí příliš často – vlastně, neviděl jsem to ještě nikde, ale pokud byste to chtěli mít, tak zde je zdrojový kód pro přeškrtnutí textu při najetí kurzorem myši. Je to vlastně stejný příklad jako minule, jenom místo hodnoty „underline“ je zde ve stylu „text-decoration“ uvedeno „line-through“:

Toto je odkaz, který se přeškrtne.

A opět klasika – Internet Explorer je bez problémů, stejně tak jako Opera 4.0, v Netcape to nefunguje. Přeškrtnutí odkazů na stránkách bych ovšem moc nedoporučoval, nevypadá to moc pěkně.

Výměna druhu kurzoru

Na internetových stránkách je zvykem, že když uživatel najede kurzorem myši na odkaz, změní se mu kurzor ze šipky na malou ručičku. Pomocí stylu jste změnit i tento kurzor, třeba na pověstné přesýpací hodiny:

Toto je odkaz s přesýpacími hodinami.

Kurzorů pro změnu je samozřejmě více, například zaměřovač, převrácené šipky, otazník apod. Více o výměně kurzoru najdete ve článku „Změna typu kurzoru pomocí kaskádových stylů„, který bych zde nerad opisoval, tak se tam koukněte.

Zoom odkazu

A na závěr článku jsem si pro vás přichystal takovou menší lahůdku – zoom odkazu při najetí kurzorem myši – první způsob je pomocí již popsaných událostí „onmouseover“ a „onmouseout“ a druhý způsob pomocí standardních prostředků CSS. V prvním případě zoomu místo příkazu „this.style.color“, jak jsem to použil na začátku článku pro změnu barvy, použijeme příkaz „this.style.zoom“:

<a href=“http://www.interval.cz“ onmouseover=“this.style.zoom=’400%'“ onmouseout=“this.style.zoom=’normal'“ >Zvětšení odkazu</a>

Zvětšení odkazu – IE 5.5

Pokud máte nový Internet Explorer 5.5, tak uvidíte, že pokud najedete kurzorem myši na odkaz, odkaz se zvětší o 400 procent a pokud odjedete z odkazu pryč, vrátí se do normálu. Pokud ho nemáte, nic bohužel neuvidíte. Zoom se dá použít na jakékoli objekty, jeho použití není tedy omezeno pouze na odkazy. Je to taková nestandardní novinka Internet Exploreru 5.5, která nefunguje v nižších verzích Exploreru, a už vůbec ne v Netscape Navigatoru či Opeře.

Zoom odkazu je možné samozřejmě udělat i pomocí kaskádových stylů a to tak, že pro základní odkaz (neaktivní) definujete určitou velikost odkazu a v pseudotřídě a:hover velikost písma (odkazu) zvětšíte ze 10pt na 12pt:

Zvětšení odkazu pomocí CSS.

Zoom odkazů ovšem nedoporučuji příliš používat, máte třeba stránku, kde je 20 odkazů pod sebou, které se mají zvětšovat a zmenšovat a celý sloupec pak skáče nahoru a dolů, posouvá se text vlevo, vpravo a vůbec to nevypadá dobře. ostatně – vyzkoušejte si to sami na výše uvedeném příkladu.

Závěrem článku

Doufám, že se vám tento článek líbil a že některé věci z něj uplatníte pro své www stránky. Nejsou tu vypsány samozřejmě všechny možné tipy, např. vytvoření tučného odkazu při najetí kurzorem myši apod. – takových kombinací je mnoho a nemá smysl je zde psát. Smyslem článku bylo, abyste věděli, jaký je vůbec princip těchto „změn“ a pak vytvářet své vlastní.

Je možné, že některý ukázkový příklad nebude fungovat, tak jak je napsáno ve článku – je to tím, že Interval.cz sám používá CSS a může dojít k rozporu mezi definici stylu pro ukázku a definicí platnou pro celý server. Zdrojové kódy k příkladům jsou ovšem správně.