[JavaScript] Jak zmienić kolor komórki tabeli po najechaniu na nią myszą?

Problem

Chcesz zmienić kolor w jednej z komórek tabeli po najechaniu na nią myszą, po opuszczeniu kursora, stary kolor ma zostać przywrócowny ponownie.

Rozwiązanie

W różnych projektach graficznych lub przy wyróżnianiu aktualnie wybranej komórki menu stworzonego z wykorzystaniem tabel, można zastosować bardzo prosty i efektowny trick - zmienić kolor pola. Zabieg stosowany z wyczuciem znacznie ułatwia nawigację po menu na stronie. Zobacz jak to osiągnąć.

<table border=1><tr>
<td bgcolor="yellow"
onMouseOver='this.style.backgroundColor="red"'
onMouseOut='this.style.backgroundColor="yellow"'>
komórka 1
</td>
<td bgcolor="#c0c0c0"
onMouseOver='this.style.backgroundColor="blue"'
onMouseOut='this.style.backgroundColor="#c0c0c0"'>
komórka 2
</td>
</tr></table>

Jak widzisz w przykładzie, ważne jest ustalenie trzech kolorów - pierwszy (bgcolor) to kolor domyślny komórki, drugi (onMouseOver) uaktywnia się po najechaniu kursorem myszy, a trzeci (onMouseOut) pojawi się po opuszczeniu komórki przez kursor.

Dobierając te trzy kolory można dowolnie modyfikować kolory poszczególnych komórek tabeli. Pamięraj tylko, że kolory muszą być umieszczone w cudzysłowach - inaczej nie zadziałają.

[JavaScript] Jak zrobić, aby cała komórka tabeli odsyłała na inną stronę po jej kliknięciu?

Problem

Chcesz stworzyć odnośnik w postaci całej komórki tabeli, tak aby można było kliknąć w dowolne miejsce komórki co spowoduje przekierowanie na inną stronę.

Rozwiązanie

Często menu budowane jest w postaci kolorowych komórek tabeli, jednak linkiem jest zawsze tylko odnośnik znajdujący się w tej komórce. Użytkownik musi "trafić" w link, co nie zawsze jest wygodne.

Znacznie ciekawszym rozwiązaniem jest kliknięcie w dowolny obszar komórki tabeli, aby od razu przejść do wybranej strony lub podstrony. Zobacz jak to osiągnąć.

Kod: Zaznacz cały

<table width=200 border=1>
<tr><td bgcolor=yellow align=center
onclick="document.location='http://web.reporter.pl/'"
style="cursor:pointer">
<a href="http://web.reporter.pl/">Web</a>
</td></tr></table> 

Dodanie do definicji komórki skryptu wywoływanego po jej kliknięciu (onclick) powoduje, że przeglądarka pobiera zawartość strony bez czekania na kliknięcie we właściwy odnośnik tekstowy.

Dodatkowy styl cursor:pointer powoduje, że symbol kursora myszy zamienia się w komórce tabeli na symbol rączki, jak w wypadku prawdziwego odnośnika.

Skrypt jest bardzo wygodny w użyciu i nie wymaga od użytkownika precyzyjnego najechania na odnośnik tekstowy, szczególnie gdy jest on krótki.