Tenhle minitutoriál se bude věnovat efektní a přitom jednoduché věci: obarvení řádku tabulky při najetí myší aopětovné odbarvení, pokud uživatel odjede s myší jinam. Já to využívám pro zvýšení přehlednosti tabulek, aby uživatel rovnou viděl, které hodnoty k sobě navzájem přísluší, a nemusel tabulku projíždět očima po řádcích a hledat.
Trik využívá javascriptových "myších" událostí: onmouseover a onmouseout. Na co asi budou reagovat je celkem jasné z jejich názvu. Pro neznalé angličtiny - onmouseover se aktivuje při najetí myši na prvek, onmouseout při posunu myši mimo blok prvku.
Tyto akce stači přidat do tabulky do tagu <tr> a přiřadit jim správnou akci, konkrétně obarvení a odbarvení.
A jak teď na to? Musíme javascriptu ukázat, co a jak že to vlastně má obarvovat. To provedeme následovně:
this.style.background = "red"
[1] this ukazuje javascriptu CO má obarvovat (pokud chceme zmenit neco jineho nez prvek, na kterem je funkce umistena, musime zadat jeho DOM cestu)
[2] style říká javacriptu, že se tu bude měnit nějaká vlastnost nastavitelná v CSS stylech
[3] backround upřesní javascriptu jaká vlastnost to bude - v našem případě barva pozadí
[4] nastavení barvy
Přiřadíme to do onmouseover, aby se nám řádek při obarvení myši obarvil (červeně). Teď už jen zbává přiřadit do onmouseout akci na odbarvení, která vypadá skoro totožně, jen zaměníme barvu.
Celé to vložíme do tagu <tr>, takže řádek tabulky pak bude vypadat třeba nějak takhle:
<tr bgcolor=white onmouseover='this.style.background = "red"' onmouseout='this.style.background = "white"'>
<td>sloupec 1</td>
<td>sloupec 2</td>
<td>sloupec 3</td>
</tr>
Řádky se vesele obarvují přesně podle toho, jak chceme. Samozřejmě - bez zapnuté javy to nikomu nepošlape. Dalo by se to možná řešit pomocí CSS pseudotřídy "hover", ale nepovedlo se mi vykoumat, jak to napsat, aby to pochopil i IE. Mnou popisovaný způsob přes javascript jsem testoval v IE, Firefoxu a Opeře a fungoval ve všech.Nevím, jestli se tomuhle dá vůbec říkat tutoriál, nebo spíš hotové řešení, ale třeba se z toho někdo přiučí 