Jak změnit barvu buňky tabulky při najetí myši?
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.
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:
|
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:
|
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:
V příkladu jsou použity dvě události – onmousedown (kliknutí tlačítka myši) a onmouseup (uvolnění tlačítka myši).
|
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 |
Popisované události a ukázky ve článku nejsou bohužel funkční v Netscape 4.xx.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
ZONER Webmail jako první v Česku přináší BIMI s VMC
11. července 2024 -
Zobrazení příspěvků z Instagramu ve WordPressu
14. října 2022 -
Monitory OLED: klíčové pojmy a funkce
13. května 2024 -
4 tipy, jak na efektivní úsporu při rozjezdu podnikání
3. ledna 2023
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024