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 záložky .
Barva po staru - 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
Barvy odkazů se v HTML definují jako atribut tagu body.
<body link="blue" vlink="purple" alink="red">
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 uvedeném 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.
Když vložíte do hlavičky dokumentu stylopis (anglicky stylesheet), můžete ovlivnit i barvu odkazů. Jak se to píše:
<style>
a:link {color: blue}
a:visited {color: purple}
a:active {color: red}
</style>
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.
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 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). 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
a:hover { color: orange}
budou všechny odkazy při přejíždění myší měnit barvu na oranžovou. Mozilla a další moderní prohlížeče to umějí také.
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.
Pomocí CSS se dá ovlivnit nejenom barva, ale spousta jiných věcí. Zejména se vypíná podtrhávání. Zápis je:
<style>
a:link, a:visited {text-decoration: none}
</style>
Fungovalo by to, i kdyby se před závorku 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.
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:
<a href="někam.htm"><img src="obrázek.gif"></a>
<a href="default.htm"><img
border="0" src="images/jakpw.gif"
alt="Jak psát web" width="131" height="88"></a>
Potom obrázek funguje jako odkaz. Aby kolem obrázku nebyl rámeček, musí se zadat border="0". 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, v Internet Exploreru se popisek (alt) objevuje ve světle žluté bublině u ukazatele myši. To je obecně vzato chyba prohlížeče, správně by v bublině měl být title. Někteří autoři dávali do odkazů obrázky hlavně kvůli té bublině s popiskem (tenkrát ještě title neexistoval). Ta bublina se dá udělat i nad textem pomocí atributu title.
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.
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>
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).
CSS
filtry fungují dobře jenom v Internet Exploreru verze 4 a vyších, stejně tak
tento trik (který jsem vymyslel, ale slavným jsem se nestal¨). 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:
a img {filter: gray}
a:hover img { filter: none}
(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.
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:
<img src="prvni.gif" onmouseover="this.src = 'druhy.gif';"
onmouseout="this.src = 'prvni.gif';">
<a href="někam.html"
onmouseover="document['obrazek'].src =
'druhy.gif' ;"
onmouseout="document['obrazek'].src =
'prvni.gif' ;">
<img src="prvni.gif"
name="obrazek">
</a>
Důležité je všinout si, že jsem obrázku přiřadil name, které je použito ve skriptu. Chcete-li mít na stránce takových odkazů víc, musíte zadávat různá name. Pozor, je třeba zadávat NAME, (nikoli ID) aby se daly použít hranaté závorky. V Mozille a Opeře 5 tento způsob funguje také, dokonce i v Netscapu 3. (Chcete-li to v NN 4 bez odkazu, vyplníte href třeba křížkem #.)
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.
Bubliny se ve starších prohlížečích objevují pouze u
obrázků pomocí atributu alt. V Internet
Exploreru v Opeře 6+ a v Mozille (ne v Netscapu 4) se ale dá udělat i u
textu. V jakémkoliv tagu se uvede atribut title="text bubliny"
.
Nejlepší je to dávat do odkazů, aby člověk věděl, co jej čeká po kliknutí.
<a href="cil_odkazu.html" title="doplňující
informace do bubliny">text odkazu</a>
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 Mozille a opeře nefunguje u obrázků bublina pomocí alt u obrázků, což je správně. Opera do druhého řádku bubliny odkazu přidává adresu, kam odkaz vede.
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 <base target="_blank">
,
že se budou všechny odkazy na stránce otevírat v novém okně.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.