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.
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 Explorer odkaz do oblíbených, 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, 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ě.
Předchozí: Odkazy v HTML, Další:
Záložky
Vizte též: zdokonalení obrázků,
cílové okno (rámy), relativní adresy,
CSS styly, Ozvučení
odkazů, Nové okno otevřené odkazem
Příklady: různé barvy odkazů,
textová tlačítka,
odkazy v tabulkách
Odkaz mimo: Jak na vyšší
účinnost odkazů (Sova v síti),
Pixyho
geniální řešení měnících obrázků +
příklad
o tvorbě, údržbě a zlepšování internetových stránek