Vylepšená kontextová nápověda pomocí JavaScriptu

11. ledna 2001

•

Zřejmě každý z nás už se na některé HTML stránce setkal s nejobvyklejším druhem kontextové nápovědy, vytvořené pomocí parametru ALT – jedná se o známé žluté či bílé okénko, které se objeví, ukážeme-li myší na nějaký obrázek. V tomto článku si ukážeme vytvoření sofistikovanější kontextové nápovědy pomocí JavaScriptu.

Jako obvykle, nejprve malá ukázka. Najeďte myší na tento odkaz. Mělo by se objevit velké světle modré okénko s nápovědou.

Zpráva:
Po kliknutí na tento odkaz se nikam nedostanete

Jak jsme uvedeného efektu dosáhli? Ve stručnosti: klíčem je použití formátovacího tagu SPAN, vlastnosti inline stylu VISIBLE a krátkého JavaScriptu, který vlastnost VISIBLE zapíná a vypíná. Podívejme se teď na použitý kód podrobněji.

Začneme od konce – tím, jak je definováno modré okénko s nápovědou. Použili jsme následující HTML kód:

<span id="help1" style="position:absolute;left:100px;top:100px;visibility:hidden;">
<table border="1" width="300" height="300" bgcolor="#E8E8FF" bordercolor="#000080">
<tr><td align="center"><small>
<big><b>Zpráva:</b></big><br>
Po kliknutí na tento odkaz se nikam nedostanete
</small></td></tr></table>
</span>

Použitý tag SPAN jsme pojmenovali help1 (toto jméno použijeme později pro jeho adresaci, další nápovědy na stránce bychom pak pojmenovali help2, help3 atd.). Důležitá je dále definice inline stylu – ta určuje jednak pozici prvku na stránce (v tomto případě jsme použili absolutní pozici, udanou v pixelech), a nastavení vlastnosti visible na hodnotu hidden – tím docílíme počáteční skrytí HTML kódu. Buďte pozorní při psaní inline stylu zejména v případě Netscape, který je daleko citlivější na správnou syntaxi nežli Internet Explorer.

Mezi počátečním a koncovým tagem SPAN je uveden samotný HTML kód kontextové nápovědy – v našem případě tabulka se světle modrým pozadím a dvěma řádky textu. Lze použít celkem libovolný HTML kód – obrázky, barvy, složitější tabulky atd. – tím můžeme docílit vzhledu kontextové nápovědy zcela podle našich představ.

Hypertextový odkaz, ke kterému se váže uvedená kontextová nápověda, využívá pro zobrazení a skrytí nápovědy oblíbených událostí onmouseover a onmouseout, při nichž volá námi definované JavaScriptové funkce showIt(id) a hideIt(id):

<a href="javascript:void(0)" onmouseover="showIt(1)" onmouseout="hideIt(1)">odkaz</a>

Poslední částí příkladu je kód funkcí showIt(id) a hideIt(id). Doporučuji definovat jej v hlavičce stránky:

Obě funkce jsou téměř totožné, popíšeme si tedy pouze první z nich – funkci showIt(id).

Parametr i na vstupu funkce určuje číslo nápovědy, která se má zobrazit (zde využijeme výše popsanou adresaci pomocí jmen help1, help2, help3 atd,). Tělo funkce je psáno dvakrát – jednou pro Internet Explorer (podmínka document.all) a podruhé pro Netscape (podmínka document.layers). Jedná se o obvyklé potěšení, které sebou přináší vzájemné přetahování těchto dvou prohlížečů o interpretaci HTML standardu a jeho rozšíření. Samotný kód je nicméně prostý – pro oba prohlížeče musíme vlastně jen získat odkaz na příslušný tag SPAN a správně nastavit vlastnost VISIBLE jeho inline stylu.

Funkce hideIt(id) pracuje totožně, pouze vlastnost VISIBLE nastavuje na hodnotu hidden. Obě funkce by rovněž šlo sloučit do jedné, přidáním dalšího parametru.

Závěrem

Uvedená technika je mnohem pracnější než použití vlastnosti ALT – výměnou za pracnost však získáme možnost definovat kontextovou nápovědu způsobem zcela podle našich potřeb. Hlavní využití popsané techniky bude zřejmě jako doplnění, nikoliv náhrada ALT nápovědy.

Kód byl testován v Internet Exploreru verze 5.0 a Netscape verze 4.08.

A to je pro tentokrát vše, přeji vám příjemný den.