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

budou v╣echny odkazy p°i p°ejφ╛d∞nφ my╣φ m∞nit barvu na oran╛ovou.

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:

<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. 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 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:

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∞!