ÄivΘ odkazy

Ji°φ Kosek ml.

Snad na vÜech strßnkßch, o kter²ch m∙₧eme prohlßsit, ₧e se grafik vy°ßdil, nalezneme ₧ivΘ odkazy. Äiv²mi mßme na mysli to, ₧e odkaz se po p°ejetφ myÜφ n∞jak zv²raznφ -- zm∞nφ tvar nebo se rozsvφtφ jasn∞jÜφ barvou. Tohoto efektu lze dosßhnout jak pro b∞₧nΘ textovΘ odkazy, tak i pro odkazy tvo°enΘ obrßzky.

ZaΦneme textov²mi odkazy. Zde je situace velice jednoduchß. Pokud prohlφ₧eΦ podporuje pseudot°φdu :hover, kterß je souΦßstφ definice druhΘ verze kaskßdov²ch styl∙ (CSS2), mßme vyhrßno. StaΦφ pomocφ stylu nastavit po₧adovanΘ vlastnosti odkazu po p°ejetφ myÜφ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ÄivΘ textovΘ odkazy</TITLE>
<STYLE TYPE="text/css"><!--
:hover { font-weight: bold;
         color: yellow }
--></STYLE>         
</HEAD>
<BODY>
<H1>ÄivΘ textovΘ odkazy</H1>
<P><A HREF="nekde.html">Ukßzkov² odkaz</A>
vΦlenφme do b∞₧nΘho textu strßnky.
</BODY>
</HTML>

V tΘto ukßzce jsme definovali, ₧e odkazy majφ b²t po p°ejetφ kurzoru myÜi zobrazeny tuΦn²m pφsmem a ₧lutou barvou. "Äiv∞" se odkazy budou chovat pouze v prohlφ₧eΦi Internet Explorer 4.0 a vyÜÜφ. Ostatnφ prohlφ₧eΦe zatφm :hover nepodporujφ a odkazy se v nich budou chovat zcela normßln∞.

U obrßzk∙ je u₧ situace pon∞kud slo₧it∞jÜφ. IE 4.0 podporuje nestandardnφ rozÜφ°enφ kaskßdov²ch styl∙ o tzv. filtry -- vytvo°enφ ₧iv²ch odkaz∙ z obrßzk∙ je pak hraΦka. My vÜak chceme vytvß°et strßnky, kterΘ se budou ₧iv∞ chovat v co nejv∞tÜφm mno₧stvφm prohlφ₧eΦ∙. Ukß₧eme si proto postup, kter² funguje v prohlφ₧eΦφch Netscape Navigator verze 3.0 a vyÜÜφ a Internet Explorer verze 4.0 a vyÜÜφ.

Nejprve si musφme pro ka₧d² obrßzek p°ipravit jeho "₧ivou" a "mrtvou" variantu. My pou₧ijeme pro aktivizovan² odkaz barevn² obrßzek a pro jeho neaktivnφ verzi Φernobφlou variantu obrßzku (viz obr. 1).

Obr. 1: Äivß a mrtvß varianta obrßzku

Nynφ m∙₧eme do strßnky vlo₧it obrßzek dalsioff.gif jako odkaz. Nesmφme zapomenout obrßzek pojmenovat pomocφ atributu NAME, abychom se pak na n∞j mohli odkßzat v rßmci objektovΘho modelu dokumentu. Potom ji₧ m∙₧eme u tagu <A> p°idat obsluhu udßlostφ onMouseOver a onMouseOut, kterß zajistφ po₧adovanou zm∞nu obrßzku.

<A HREF="dalsi.html" 
   onMouseOver="document.Dalsi.src='dalsion.gif'"
   onMouseOut="document.Dalsi.src='dalsioff.gif'">
   <IMG SRC="dalsioff.gif" WIDTH=130 HEIGHT=50 BORDER=0
        NAME=Dalsi ALT="PokraΦovßnφ"></A>

V²Üe uvedenß ukßzka je zcela funkΦnφ, nenφ vÜak zdaleka profesionßlnφ. N∞kterΘ starÜφ prohlφ₧eΦe nemusejφ znßt p°φsluÜn² objekt a mohou u₧ivatele p°ekvapit nemilou chybovou hlßÜkou. Navφc nenφ "₧ivß" varianta obrßzku p°ednaΦtena spoleΦn∞ se strßnkou a odkazy se budou ze zaΦßtku aktivovat se zpo₧d∞nφm. VylepÜenou variantu ₧iv²ch odkaz∙, kterß navφc definuje funkce u₧iteΦnΘ pro za°azenφ v∞tÜφho mno₧stvφ ₧iv²ch odkaz∙, jsem si pro vßs p°ipravil na zßv∞r dneÜnφho tipu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Ukßzka ₧iv²ch odkaz∙</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--
var scriptsOn = false;

if (((navigator.appName == "Netscape") 
    && (parseInt(navigator.appVersion) >= 3)) ||
   ((navigator.appName == "Microsoft Internet Explorer") 
    && (parseInt(navigator.appVersion) >=4)))
   scriptsOn = true;

function RegisterImage(imgName, imgOn, imgOff)
{
    if (scriptsOn) {
        eval (imgName + "On = new Image()");
        eval (imgName + "On.src = \"" + imgOn + "\"");
        eval (imgName + "Off = new Image()");
        eval (imgName + "Off.src = \"" + imgOff + "\"");
    }
}

function ImageOver(imgName)
{
    if (scriptsOn)
        eval ("document." + imgName + ".src = " + imgName + "On.src");
}

function ImageOut(imgName)
{
    if (scriptsOn)
        eval ("document." + imgName + ".src = " + imgName + "Off.src");
}

RegisterImage ("Dalsi", "dalsion.gif", "dalsioff.gif");
RegisterImage ("Predchozi", "predon.gif", "predoff.gif");

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<A HREF="pred.html" onMouseOver="ImageOver('Predchozi')"
                    onMouseOut="ImageOut('Predchozi')">
    <IMG SRC="predoff.gif" WIDTH=130 HEIGHT=50 BORDER=0 
         NAME=Predchozi ALT="P°edchozφ"></A>    
<A HREF="dalsi.html" onMouseOver="ImageOver('Dalsi')"
                     onMouseOut="ImageOut('Dalsi')">
    <IMG SRC="dalsioff.gif" WIDTH=130 HEIGHT=50 BORDER=0
         NAME=Dalsi ALT="PokraΦovßnφ"></A>    
</BODY>
</HTML>

Obr. 2: ÄivΘ odkazy prakticky