Jak podświetlić element po najechaniu na niego myszą

Zobacz działający przykład

W idealnym świecie takie pytanie by nie istniało. Jeśli chcielibyśmy podświetlić np. rekord tabeli po najechaniu na niego myszą wystarczyłoby stworzyć styl: tr:hover{background:#f00;}. Ale niestety żyjemy w niezwykłym i fascynującym świecie przeglądarki Internet Explorer 6 i proste rozwiązanie nie działają.

Skrypt, który przedstawię jest w miarę prosty i nie wymaga ręcznego dodawania onmouseover i onmouseout do każdego rekordu - zrobi to za nas.

Dawaj mi ten skrypt bo nie mam czasu!

Najpierw definicja klas CSS...

Najpierw musimy utworzyć dwie klasy - jedną odpowiedzialną za wygląd rekordu gdy nie ma nad nim wskaźnika myszy i drugą gdy tenże wskaźnik jest nad rekordem

tr.mouseOn{background:#F0E0CE;}
tr.mouseOut{background:#f9f9f9;}

...później trochę JavaScript...

Trochę javascript, który najpierw wczytuje z dokumentu wszystkie elementy tr. Następnie sprawdza czy mają one klasę mouseOut. Jeśli tak to dodają odpowiednie listenery onmouseout i onmouseover, które mają za zadanie zmieniać klasę przydzieloną do elementu tr. Skrypt umieszczamy w sekcji head (lub - najlepiej - pliku zewnętrznym wczytywanym w head).

<script type="text/javascript">
//<![CDATA[
mouseHighlight = function(){
  var i, tr = document.getElementsByTagName('tr');
  for(i = 0; i<tr.length; i++){
    if(tr[i].className=='mouseOut'){
      tr[i].onmouseover = function(){this.className = 'mouseOn'};
      tr[i].onmouseout = function(){this.className = 'mouseOut'};
    }
  }
}
window.onload = mouseHighlight;
//]]>
</script>

...i tabelka

Kod tabelki może wyglądać tak:

<table summary="Tabelka testowa">
<thead>
  <tr><th>ID.</th><th>auto</th><th>kolor</th></tr>
</thead>
<tbody>
  <tr class="mouseOut"><td>1</td><td>audi</td><td>czerwony</td></tr>
  <tr class="mouseOut"><td>2</td><td>bmw</td><td>zielony</td></tr>
  <tr class="mouseOut"><td>3</td><td>fiat</td><td>niebieski</td></tr>
  <tr class="mouseOut"><td>4</td><td>toyota</td><td>czarny</td></tr>
</tbody>
</table>

Zwróć uwagę, że domyslnie elementy tr mają ustawioną klasę - właśnie mouseOut, wg. której później są dodawane odpowiednie akcje. W ten sposób możemy ustalić, które elementy mają reagować na najechanie myszą, a które nie.