Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zdarzenia onmouseover i onmouseout

Email Drukuj PDF

Kolejne popularne zdarzenia to onmouseover i onmouseout. Pierwsze z nich powstaje, kiedy kursor myszy znajdzie się nad danym elementem strony, drugie — kiedy opuści obszar tego elementu. Pozwala to dynamicznie reagować na poczynania użytkownika. Zobaczmy zatem, jak to działa, na prostym przykładzie. Tym razem okno dialogowe będzie wyświetlane, kiedy kursor myszy zostanie przesunięty nad akapit tekstowy utworzony za pomocą znacznika p, schematycznie:

<p onmouseover="procedura_obsługi();">

Pełny kod przykładu przyjmie więc postać widoczną na listingu 5.7.

Listing 5.7. Obsługa zdarzenia onmouseover

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function onmouseoverHandler()

    {

      alert("Tak! Kursor znalazł się nad akapitem.");

    }

    </script>

  </head>

  <body>

    <p onmouseover="onmouseoverHandler();">

      Przesuń kursor myszy nad ten akapit.

    </p>

  </body>

</html>

Znacznikowi p została przypisana procedura obsługi zdarzenia onmouseover w postaci funkcji o nazwie onmouseoverHandler. We wnętrzu tej funkcji znajduje się z kolei wywołanie metody alert wyświetlającej okno dialogowe. Dzięki temu każdorazowe najechanie kursorem myszy na taki akapit spowoduje reakcję przeglądarki.

Zdarzenie onmouseout jest przeciwieństwem onmouseover i powstaje, kiedy kursor myszy znajdzie się poza obszarem danego elementu strony. Gdyby trzeba było przypisać procedurę obsługi takiego zdarzenia akapitowi tekstowemu, należałoby wykorzystać konstrukcję w postaci:

<p onmouseout="procedura_obsługi();">

Powróćmy więc do przykładu, w którym akapity tekstowe udawały odnośniki. Możemy go teraz uzupełnić nowym elementem. Otóż po najechaniu na klasyczny odnośnik zwykle na pasku stanu pojawia się adres wskazywanej przez niego strony. W przypadku skryptu wykorzystującego akapity tekstowe tego efektu brakowało. Można go jednak zasymulować za pomocą zdarzeń onmouseover i onmouseout, tak jak zostało to zaprezentowane na listingu 5.8.

Listing 5.8. Akapity obsługujące zdarzenia onmouseover i onmouseout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    var adresy = Array

    (

      "http://helion.pl/ksiazki/php5pk.htm",

      "http://helion.pl/ksiazki/php102.htm",

      "http://helion.pl/ksiazki/tiphp2.htm"

    )

 

    var oldStatus = "";

 

    function onclickHandler(num)

    {

      if(num >= 0 && num < adresy.length){

          location.assign(adresy[num]);

      }

    }

 

    function onmouseoverHandler(num)

    {

      if(num >= 0 && num < adresy.length){

          oldStatus = window.status;

          window.status = adresy[num];

      }

    }

 

    function onmouseoutHandler(num)

    {

      window.status = oldStatus;

    }

    </script>

  </head>

  <body>

    <p onclick="onclickHandler(0);"

       onmouseover="onmouseoverHandler(0);"

       onmouseout="onmouseoutHandler();"

    >

    PHP5. Praktyczny kurs

    </p>

    <p onclick="onclickHandler(1);"

       onmouseover="onmouseoverHandler(1);"

       onmouseout="onmouseoutHandler();"

    >

    PHP. 101 praktycznych skryptów

    </p>

    <p onclick="onclickHandler(2);"

       onmouseover="onmouseoverHandler(2);"

       onmouseout="onmouseoutHandler();"

    >

    PHP. Tablice informatyczne

    </p>

  </body>

</html>

Tym razem każdy z akapitów tekstowych ma przypisane procedury obsługi dla trzech zdarzeń:

  • onclick — funkcja onclickHandler,

  • onmouseover — funkcja onmouseoverHandler,

  • onmouseoutfunkcja onmouseoutHandler.

Obsługa zdarzenia onclick jest taka sama jak w poprzednich przykładach. Kliknięcie akapitu powoduje wywołanie funkcji onclickHandler i przekazanie jej wartości określającej numer odnośnika zapisanego w tablicy adresy. Funkcja weryfikuje otrzymane dane i ładuje nową witrynę, wywołując metodę assign obiektu location. Argumentem wywołania metody jest adres witryny pobrany z tablicy adresy.

Zdarzeniu onmouseover przypisana jest z kolei funkcja onmouseoverHandler, przyjmująca w postaci argumentu wartość wskazującą indeks komórki tablicy adresy, w której znajduje się adres przypisany danemu akapitowi. Funkcja sprawdza najpierw, czy otrzymana wartość nie przekracza dopuszczalnego zakresu, następnie zapisuje aktualny tekst paska stanu w pomocniczej zmiennej oldStatus. Następnie zmienia tekst na URL odczytany z tablicy.

Z kolei zadaniem funkcji onmouseoutHandler, która będzie wywoływana, kiedy kursor myszy opuści obszar któregoś z akapitów, jest przywrócenie poprzedniego tekstu paska stanu, a więc przypisanie właściwości statusobiektu window wartości zmiennej oldStatus.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464230