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