webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> javascript

Efekt rollover dla tekstu

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

szukaj: efekt rollover efekt rollover js js javascript 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

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

Oczekujesz profesjonalnej obługi?
Strony www.
Przebijamy konkurencje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org