Příkazy HTML v kostce

Příručka pro snadnou tvorbu html dokumentů.

Jak na propadávací tlačítka
Zde naleznete popis jak co nejjednodušeji vytvořit efekt propadávajících se tlačítek při najetí myši na

1. Nejdříve si musíme nakreslit dva obrázky pro tlačítko, jeden "nepropadlý - nezmáčknutý" a jeden "propadlý - zmáčknutý". Ten druhý musí být posunutý o pár pixelů, aby se docílilo požadovaného efektu.

Nezmáčkuté tlačítko Zmáčknuté tlačítko

2. Nezmáčknutou verzi tlačítka umístíme na stránku standardním způsobem
<IMG SRC="tlacitko0.gif" WIDTH=81 HEIGHT=35 BORDER=0 ALT="">

3. K tomuto tlačítku přiřadíme název
<IMG SRC="tlacitko0.gif" NAME="tlacitko" WIDTH=81 HEIGHT=35 BORDER=0 ALT="">

4. Vytvoříme odkaz
<A HREF="tlacitko.html"><IMG SRC="tlacitko0.gif" NAME="tlacitko" WIDTH=81 HEIGHT=35 BORDER=0 ALT=""></A>

5. Teď definujeme co se stane po najetí myši do oblasti obrázku.
<A HREF="tlacitko.html" ONMOUSEOVER="ChangeImage('tlacitko','1')"><IMG SRC="tlacitko0.gif" NAME="tlacitko" WIDTH=81 HEIGHT=35 BORDER=0 ALT=""></A>
Tímto řekneme aby se po najetí kurzoru myši do oblasti obrázku spustil skript ChangeImage s parametry tlacitko a 1.

6. Dále definujeme co se stane při opuštění oblasti obrázku.
<A HREF="tlacitko.html" ONMOUSEOVER="ChangeImage('tlacitko','0')" ONMOUSEOUT="ChangeImage('Tlacitko','0')"><IMG SRC="tlacitko0.gif" NAME="tlacitko" WIDTH=81 HEIGHT=35 BORDER=0 ALT=""></A>

7.Teď nejdůležitější část: JavaScript

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

Definice JavaScriptu Začátek vlastního scriptu \ | Toto musí být jen jedna řádka | Zde probíhá kontrola zda má uživatel | IE alespoň verze 4 nebo NN verze 3 | jinak propadávání nefunguje / Nemá-li NN 3 nebo IE 4 zakáže se script Má-li NN 3 nebo IE 4 provede se script Definuje a stahuje se - - nezmáčknuté tlačítko Definuje a stahuje se - - zmáčknuté tlačítko Definice funkce ChangeImage Provádí se jen při NN >3 nebo IE >4 Sestavení odkazu na obrázek Záměna obrázku v dokumentu Konec těla skriptu Konec JavaScriptu

U JavaScriptů je důležité dodržovat velikost písmen, promněnná A není promněnná a. Výhoda tohoto scriptu je v jeho použitelnosti pro více obrázků, nemusíte totiž znovu a znovu psát celý script, ale stačí přidávat jen 4 řádky pro definování obrázků (v tomto příkladu tlacitko0 = new Image(); tlacitko0.src = "tlacitko0.gif"; tlacitko1 = new Image(); tlacitko1.src = "tlacitko1.gif"; ).

8. Výsledek

9. Nefunguje ? To není nic neobvyklého. Zkontrolujte:
1. Je u každého tlačítka - obrázku definováno jméno NAME="jmeno"?
2. Nemáte různé velikosti písmen?
3. Je správně spojena řádka detekce prohlížeče? Pro kontrolu ji uvádím v celku:
if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3) || (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >=4)) Java = "Enabled";
4. Nemáte někde překlep?
5. Pošlete mi vaší stránku na e-mail jan@klepal.cz a já se pokusím najít chybu.

10. Pro lepší efekt zkuste přidat stín.