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 postaru - Pomocí CSS - Pseudotřída :hover - 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 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.
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é:
a {font-weight: bold; text-dexoration: none}
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
a:hover { color: orange},
budou všechny odkazy při přejíždění myší měnit barvu na oranžovou.
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>
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.
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 funguje dobře jenom v prohlížečích verze 4 a vyších. (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:
Navíc Netscape filtry zatím nepodporuje.) Může se využíta img {filter: gray}
a:hover img { filter: none}
(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.
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 druhý.gif:
<img src="prvni.gif" onmouseover="this.src =
'druhy.gif';" onmouseout="this.src = 'prvni.gif';" atd.>
<a href="někam.html"
onmouseover="document['obrazek'].src = 'druhy.gif' ;"
onmouseout="document['obrazek'].src = 'prvni.gif' ;">
<img src="prvni.gif" name="obrazek"
atd.>
</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 okazů 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. (Chcete-li to v NN 4 bez odkazu, vyplníte href nějakým nesmyslem.) V Mozille a Opeře 5 tento způsob funguje také, dokonce i v Netscapu 3.
Samozřejmě, že si můžete obrázků připravit víc a lze použít také události onclick, ondblclick atd. atd. Také se to dá zautomatizovat. Ale to už neprozradím, protože to teoreticky neumím a nechci plácat nesmysly. (V praxi už se to vždycky nějak odladí.)
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).
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ě!
Předchozí: Odkazy v HTML, Další:
Záložky
Vizte též: zdokonalení obrázků, cílové okno (rámy), relativní
adresy, CSS styly
Příklady: různé barvy odkazů, textová tlačítka, odkazy v tabulkách
Obsah
Hledání
Základní kurs
Editory
HTML tipy
Provoz webu
CSS styly
Jak psát web:
http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz
Sláva kočkám! Poslední aktualizace 17.05.2001