Efekt rollover dla tekstu

autor: Bartosz 'regua' Reguła, ostatnia modyfikacja: 2007-03-08

szukaj: efekt rollover js javascript

Efekt rollover to zmiana obrazka po umieszczeniu nad nim kursora. Jak jednak zrobić to samo, jeśli zamiast obrazka, chcemy zmienić tekst? Równie prosto.

Tworzymy div z tekstem, jaki ma się tam znaleźć na początku (po otwarciu strony). Warto ustawić mu atrybut id, który przyda się podczas bardziej zaawansowanych operacji na tym fragmencie tekstu.

<div id="roll">2 + 2 = ?</div>

Teraz dodamy do niego kod JavaScript odpowiedzialny za zmianę tekstu.

<div id="roll" onmouseover="this.innerHTML = '4';">2 + 2 = ?</div>

Gdybyśmy chcieli, aby po umieszczeniu kurosora nad div'em ten wyświetlił np. obrazek, spokojnie możemy umieścić kod HTML zamiast liczby '4' podanej w przykładzie. Należy przy tym pamiętać, żeby dodać znak \ przed cudzysłowem, gdyż inaczej wystąpią błędy w kodzie HTML spowodowane wcześniejszym zamknięciem atrybutu onmouseover.

Jeśli tekst ma powrócić do pierwotnej formy po usunięciu kursora z danego div'a, trzeba użyć onmouseout:

<div id="roll" onmouseover="this.innerHTML = '4';" onmouseout="this.innerHTML = '2 + 2 = 4';">2 + 2 = ?</div>

2 + 2 = ?

Oczywiście możemy też wykorzystać ten sam kod do zmiany tekstu np. po kliknięciu w obszarze danego div'a - w tym wypadku zmieniamy onmouseover na onclick.

A co, jeśli chciałbyś, aby div zmienił swoją zawartość gdy klikniemy nie na niego, ale np. na obrazek albo przycisk obok? Musimy w tym wypadku "znaleźć" div w kodzie, a najłatwiej to zrobić przez jego id (ustawione na "roll") poprzez JavaScriptową funkcję getElementById.

<div id="roll">2 + 2 = ?</div> <br /> <div onclick="document.getElementById('roll').innerHTML = '4';" onmouseout="document.getElementById('roll').innerHTML = '2 + 2 = ?';"> <b>Pokaż wynik</b></div>

2 + 2 = ?

Pokaż wynik

Ciekawe, prawda? Polecam eksperymentować z innymi funkcjami JS opisanymi w tutorialu W3C

Pamiętaj, że jedno id może powtórzyć się w dokumencie tylko jeden raz! Tak więc kolejne div'y przeznaczone do "rollover'owania" nazywaj np. roll2, roll3 itp.

Bartosz 'regua' Reguła

szukaj: efekt rollover js javascript

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!