Jak zdokonalit odkazy

Link znamená barvu nenavštíveného odkazu, vlink navštíveného a alink znanená aktivní odkaz. Pokud to nenastavíte, záležejí barvy na nastavení prohlížeče (nejčastěji jsou stejné jako v tomto příkladu: modrá, fialová a červená). 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.

Barva pomocí CSS

Když vložíte do hlavičky dokumentu stylopis (anglicky stylesheet), můžete ovlivnit i barvu odkazů. (Funguje to v prohlížečích IE 3, NN 4 a vyšších.) Jak se to píše:

<style>

a:link    {color: blue}

a:visited    {color: purple}

a:active    {color: red}

</style>

Nejlepší je napsat to do hlavičky. Doufám, že význam slov je jasný. Kdyžtak mrkněte na návod, jak se CSS používají.

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

Pseudotřída :hover

V předchozím příkladu jsem použil CSS a pseudotřídy u odkazů. Od 4. verze Internet Explorer obsahuje 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

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á jako tlačítko.

Bez podtržení

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

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

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:

Potom obrázek funguje jako odkaz. Je dobré a nutné do obrázku vyplnit parametr alt, aby byl odkaz zřejmý, i když se obrázek zatím nenatáhne. Pokud už se natáhne, popisek se objevuje ve světle žluté bublině u ukazatele myši. Někteří autoři dávají do odkazů obrázky hlavně kvůli té bublině s popiskem. Ta se dá, mimochodem, udělat i nad textem pomocí atributu title.

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 + filtry

CSS funguje dobře jenom v prohlížečích verze 4 a vyších. (Navíc Netscape filtry zatím nepodporuje.) Může se využít libovolný filtr, já uvedu příklad na zešedivění normálních odkazů. Ale obrázek, nad kterým zrovna bude myš, se zobrazí barevně. Stačí napsat do stylopisu tuto deklaraci:

(Je to i ve stylopisu této stránky. Pokud se použije místo "gray" jiného filtru, dosáhne se zřejmě jiného efektu.) Vtip je v tom, že potom už na to víc nemusím myslet, takto "živě" se budou chovat všechny obrázky v odkazech na dané stránce. Kdybych to chtěl jenom u některých, použiji třídu nebo identifikátor.

JavaScriptem

Omezím se na praktické použití. Teorie je na mnoho stran a přiznám se bez mučení, že v Javascriptech profík nejsem. (Tomuhle ale ještě rozumím :-) 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:

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

Bublina u textu

Bubliny se ve starších prohlížečích objevují pouze u obrázků. V IE čtyřce pětce a v Mozille 5 (ne v Netscapu 4) se ale dá udělat i u textu. Prostě se v jakémkoliv tagu uvede atribut

title="text
bubliny"

. Nejlepší je to dávat do odkazů, aby člověk věděl, co jej čeká po kliknutí.

V prohlížeči Opera atribut title nefunguje, zato se u odkazů objevuje automaticky bublina s adresou odkazu (to, co se normálně objevuje ve stavovém řádku).

V Mozille nefunguje u obrázků bublina pomocí alt, musí se všechno dělat pomocí title.

Přepnutí do nového okna

Při procházení Internetem 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 pomocí pravého tlačítka příkazem "otevřít odkaz v novém okně" (open in new window). (To samé dělá stisknutý Shift při klikání v IE.)

Každý odkaz se dá ale upravit tak, aby automaticky otevíral nové okno. Dělá se to pomocí atributu target, jemuž se přiřadí hodnota "_blank". <a href="http://www.atlas.cz" target="_blank"> je zápis odkazu, který v novém okně prohlížeče zobrazí český portál Atlas.

Jako hodnota atributu target se může použít jméno nějakého rámu, ale to bych už moc odbočoval. Nebo se dá nastavit jedním tagem, že se budou všechny odkazy otevírat v novém okně!