Jak změnit barvu buňky tabulky při najetí myši?

17. května 2000

•

V tomto článku vám poradím, jak pomocí jednoduchého JavaScriptu dokážete změnit barvu buňky tabulky při najetí kurzorem myši. Ve článku je navíc uveden seznam událostí, které se dají v tomto příkladu použít (najetí myší, kliknutí myší apod.).

Způsoby využití jsou různé – v kombinaci s odkazy se dá tento skript použít například pro efektní navigační menu serveru, či pouze pro zvýraznění určité části textu. První popsaný způsob použití byl použit i na našem serveru.

Text v buňce tabulky

Uživatelé, kteří se vyznají JavaScriptu již vědí, že budou použity události onmouseover a onmouseout. Událost onmouseover nastane v okamžiku, kdy uživatel přesune kurzor myši nad daný element. Událost onmouseout nastane naopak v okamžiku, kdy uživatel posune kurzor myši mimo daný element.

Jak jsem již avizoval na začátku článku, použijeme tyto dvě události pro změnu pozadí buňky tabulky a to takto:

onmouseover=“this.style.backgroundColor=’red'“ onmouseout=“this.style.backgroundColor=’blue'“

Barvu při najetí kurzorem myši (nyní červená) a barvu při odsunutí kurzoru myši (nyní modrá) lze pochopitelně libovolně změnit. Kód uvedený v tabulce umístněte do buňky tabulky, u které chcete, aby při najetí kurzorem myši měnila barvu. Dále nastavte barvu buňky pomocí parametru BGCOLOR na barvu uvedenou v události onmouseover – to aby, aby výchozí barva buňky byla stejná jako koncová. Celá tabulka by tehdy vypadat mohla takto:

<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“0″>
<TR>
<TD bgcolor=“blue“ onmouseover=“this.style.backgroundColor=’red'“ onmouseout=“this.style.backgroundColor=’blue'“>Text v buňce tabulky</TD>
</TR>
</TABLE>

Pomocí událostí můžete např. zařídit, aby se barva buňky tabulky změnila při kliknutí do dané buňky a aby se vrátila zpět v okamžiku uvolnění levého tlačítka na myši, jak ukazuje následující příklad:

Text v buňce tabulky

V příkladu jsou použity dvě události – onmousedown (kliknutí tlačítka myši) a onmouseup (uvolnění tlačítka myši).

<TABLE CELLSPACING=“0″ CELLPADDING=“2″ BORDER=“0″>
<TR>
<TD bgcolor=“blue“ onmousedown=“this.style.backgroundColor=’red'“ onmouseup=“this.style.backgroundColor=’blue'“>Text v buňce tabulky</TD>
</TR>
</TABLE>

Možná se ptáte, jaké události se dají použít pro tento článek. Jejich seznam – společně s krátkým vysvětlením – je uveden v následující tabulce – nejsou zde uvedeny ovšem všechny existující události, které se dají použít pouze v kombinaci s formuláři.

onclick	Událost nastane při kliknutí myši nad daným elementem
ocdbclick	Událost nastane při dvojkliku myši nad daným elemenem
onmousedown	Událost nastane při držení levého tlačítka myši nad elentem. Událost končí při uvolnění tlačítka myši.
onmouseup	Událost souvisí s událostí onmousedown, nastává při uvolnění tlačítka myši, které se stále vyskytuje nad daným elementem.
onmouseover	Událost nastane při najetí kurzoru myši nad element
onmouseout	Událost nastane umístněním kurzoru myši mimo element – souvisí s událostí onmouseover
onkeypress	Událost nastane v okamžiku, kdy je nad elementem stisknuta klávesa.
onkeydown	Událost nastane v okamžiku, kdy je nad elementem stisknuta a přidržena klávesa
onkeyup	Souvisí s onkeydown, událost nastane v okamžiku, kdy je klávesa uvolněna