Jak podświetlić element po najechaniu na niego myszą
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.