Zatržení checkboxu při najetí myší na odkaz

10. listopadu 2000

•

Určitě znáte několik efektů, které se dají vytvořit pomocí JavaScriptu – například po najetí kurzorem myši na obrázek tento obrázek vymění za jiný, či kdy při najetí kurzorem myši se odkaz podtrhne, změní barvu, velikost apod. Já vám dnes ukážu obdobný skript, který vám bude aktivovat zatržítko.

Efekt je podobný tomu, kdy přejedete kurzorem myši nad odkazem a on změní barvu. To lze ostatně udělat pomocí kaskádových stylů a pseudotřídy a:hover, a není k tomu potřeba JavaScriptu. Zde ale nebudeme měnit barvu odkazu, ale stav formulářového prvku checkbox. Neobejdeme se sice bez JavaScriptu, ale nejedná se o nic složitého. Musím vám ale předvést ukázku, abyste věděli, o co vlastně jde:

Začneme s HTML částí. Vytvořte si nějaký jednoduchý formulář, který bude obsahovat několik odkazů a k nim přiřazené checkboxy, jejichž stav budeme měnit. Zdrojový kód formuláře může třeba vypadat takto:

<Form name=“rolloverCHECK“>
<input type=“checkbox“ name=“boxes“><a href=“http://www.interval.cz/“ onMouseover=“checkOK(0)“ onMouseout=“checkNO(0)“>Interval.cz</a><br>
<input type=“checkbox“ name=“boxes“><a href=“http://www.interval.cz/r-category.asp?idctg=15″ onMouseover=“checkOK(1)“ onMouseout=“checkNO(1)“>Tvorba www</a><br>
<input type=“checkbox“ name=“boxes“><a href=“http://www.interval.cz/r-category.asp?idctg=14″ onMouseover=“checkOK(2)“ onMouseout=“checkNO(2)“>Grafika</a><br>
<input type=“checkbox“ name=“boxes“><a href=“http://download.interval.cz“ onMouseover=“checkOK(3)“ onMouseout=“checkNO(3)“>Download</a><br>
</form>

Formulář si pochopitelně musíte nějak pojmenovat, aby se na něj šlo odkazovat z JavaScriptu. Stejně tak si musíte pojmenovat formulářové prvky, jinak to nebude fungovat. Formulář je v našem případě pojmenovaný jako „rolloverCHECK“, formulářová tlačítka jako „boxes“.

Samotnou změnu stavu zatržítka (zatrženo/nezatrženo) budeme provádět pomocí událostí Onmouseover a Onmouseout. Jak již název události naznačuje, Onmouseover určuje stav při najetí kurzorem myši, událost Onmouseover přesný opak – tedy oddálení kurzoru.

Ke změně stavu checkboxu si nyní vytvoříme v JavaScriptu dvě funkce – jedna bude pro definování stavu, kdy se kurzor nachází nad odkazem – funkce checkOK() – a druhou pro definování stavu, kdy se kurzor nachází mimo odkaz – funkce checkNO(). Tyto funkce zavoláme ve formuláři pomocí popisovaných událostí Onmouseover a Onmouseout:

Výše uvedený JavaScript umístněte za formulář. Jak je z ukázky vidět, odkazujeme se v Javascriptu na seznam položek boxes a pomocí indexu whichbox (což je vlastně pořadové číslo formulářového prvku) na jeden konkrétní prvek formuláře. Je zde využita vlastnost formulářového prvku checked, pomocí které vytváříme zatržení (true) či naopak zrušení zatržení (false).

A to je v podstatě vše. Skript by měl být funkční ve čtyřkových verzích prohlížečů – testováno v Internet Exploreru 5.0, Netscape Navigátoru 4.51 a v Opeře 4.0. Použité prvky formuláře (v tomto případě checkbox) můžete samozřejmě nahradit i za jiné, třeba radio button.