Kurs języka HTML i CSS

Poradnik webmastera

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

Skalowanie warstw

Email Drukuj PDF

Warstwy mogą być również w prosty sposób skalowane, w tym celu wystarczy modyfikować właściwości width (szerokość) i height (wysokość) obiektu style. Zmiana rozmiarów nie przysparza zatem żadnych problemów. W jaki sposób napisać skrypt pozwalający na manipulację szerokością i wysokością warstwy, zostało zobrazowane na listingu 5.23.

Listing 5.23. Zmiana rozmiarów warstw za pomocą kliknięć

<!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 change(width, height)

    {

      var selector = document.getElementById('wr1').style;

      var oldWidth = parseInt(selector.width);

      var oldHeight = parseInt(selector.height);

      var newWidth = oldWidth + width;

      var newHeight = oldHeight + height;

      if(newWidth > 200) newWidth = 200;

      if(newHeight > 200) newHeight = 200;

      if(newWidth < 0) newWidth = 0;

      if(newHeight < 0) newHeight = 0;

      selector.width = newWidth +"px";

      selector.height = newHeight +"px";

    }

    </script>

  </head>

  <body>

    <div

      id="wr1"

      style="position:absolute;width:100px;height:100px;

             background-color:yellow;left:200px;top:140px;visibility:visible;"

    >

    </div>

    <div>

    <input type="button" value="Zwiększ w poziomie" onclick="change(10, 0)">

    <input type="button" value="Zwiększ w pionie" onclick="change(0, 10)">

    <input type="button" value="Zmniejsz w poziomie" onclick="change(-10, 0)">

    <input type="button" value="Zmniejsz w pionie" onclick="change(0, -10)">

    </div>

  </body>

</html>

W kodzie HTML zostały tu zdefiniowane cztery przyciski oraz warstwa o identyfikatorze wr1. Pierwszy przycisk odpowiada za zwiększanie rozmiarów warstwy w poziomie, drugi za zwiększanie w pionie, trzeci za zmniejszanie w poziomie, a czwarty za zmniejszanie w pionie. Wszystkie te operacje są wykonywane przez funkcję change, która została przypisana jako procedura obsługi zdarzenia onclick.

Funkcja ta otrzymuje dwa argumenty. Pierwszy z nich określa, o ile pikseli mają się zmienić rozmiary warstwy w poziomie, drugi — w pionie. A zatem znaczenie wywołań jest następujące:

  • change(10, 0) — zwiększenie szerokości o 10 pikseli,

  • change(0, 10) — zwiększenie wysokości o 10 pikseli,

  • change(–10, 0) — zmniejszenie szerokości o 10 pikseli,

  • change(0, -10) — zmniejszenie wysokości o 10 pikseli.

W kodzie funkcji aktualna wysokość jest zapisywana w zmiennej oldHeight, a aktualna szerokość — w oldWidth. Odbywa się to przez odczytanie właściwości width i height obiektu style warstwy wr1 i przetworzenie ich na wartości liczbowe za pomocą metody parseInt. Następnie do wysokości jest dodawana wartość argumentu height, a do szerokości — argumentu width.

Maksymalne rozmiary warstwy zostały ustalone na 200×200 pikseli, a minimalne na 0×0 pikseli. Stąd po wykonaniu dodawań za pomocą instrukcji warunkowych sprawdzane jest, czy newWidth i newHeight nie są większe niż 200 bądź mniejsze od 0. Jeśli dopuszczalne wartości zostaną przekroczone, przeprowadzane są odpowiednie korekty uniemożliwiające zmianę rozmiarów poza założony zakres. Na zakończenie nowa szerokość i wysokość są przypisywane do warstwy.

Proces skalowania warstwy można bardziej zautomatyzować. W powyższym przykładzie zmiany były skokowe, a wykonanie każdego kroku wymagało kliknięcia przycisku. Ciekawy efekt powstanie, jeśli zmiana rozmiarów będzie się odbywała automatycznie po najechaniu kursorem myszy na dany przycisk. Kliknięcia staną się zbędne. Czyli kiedy kursor myszy znajdzie się np. nad przyciskiem powiększania w poziomie, warstwa automatycznie zacznie zwiększać swoją szerokość, aż osiągnie rozmiar maksymalny (200 pikseli) lub też kursor myszy opuści obszar przycisku. Sposób realizacji takiego zadania jest widoczny na listingu 5.24.

Listing 5.24. Zmiana rozmiarów warstwy z użyciem zdarzeń 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 tid, speed = 1;

    function change(width, height)

    {

      var selector = document.getElementById('wr1').style;

      var oldWidth = parseInt(selector.width);

      var oldHeight = parseInt(selector.height);

      var newWidth = oldWidth + width;

      var newHeight = oldHeight + height;

      if(newWidth > 200){

        stop();

        newWidth = 200;

      }

      if(newHeight > 200){

        stop();

        newHeight = 200;

      }

      if(newWidth < 0){

        stop();

        newWidth = 0;

      }

      if(newHeight < 0){

        stop();

        newHeight = 0;

      }

      selector.width = newWidth +"px";

      selector.height = newHeight +"px";

    }

    function start1(w, h)

    {

      str = "change(" + w + ", " + h + ");";

      tid = setInterval(str, speed);

    }

    function stop()

    {

      clearInterval(tid);

    }

    </script>

  </head>

  <body>

    <div

      id="wr1"

      style="position:absolute;width:100px;height:100px;

             background-color:yellow;left:200px;top:140px;visibility:visible;"

    >

    </div>

    <div>

    <input type="button" value="Zwiększ w poziomie"

      onmouseover="start1(2, 0);" onmouseout="stop();">

    <input type="button" value="Zwiększ w pionie"

      onmouseover="start1(0, 2);" onmouseout="stop();">

    <input type="button" value="Zmniejsz w poziomie"

      onmouseover="start1(-2, 0);" onmouseout="stop();">

    <input type="button" value="Zmniejsz w pionie"

      onmouseover="start1(0, -2);" onmouseout="stop();">

    </div>

  </body>

</html>

Tym razem każdy z przycisków ma przypisane dwie procedury obsługi zdarzeń. Dla zdarzenia onmouseover, powstającego, kiedy kursor myszy znajdzie się nad obiektem, jest to funkcja start1, natomiast dla zdarzenia onmouseout, powstającego, kiedy kursor myszy opuści obszar obiektu — funkcja stop. Funkcja start1 otrzymuje dwa argumenty, których znaczenie jest takie jak w przypadku funkcji change. Pierwszy z nich oznacza, o ile pikseli należy zmienić szerokość warstwy, a drugi — o ile pikseli należy zmienić wysokość warstwy. Jedynym zadaniem funkcji start1 jest uruchomienie zegara wywołującego funkcję change w zadanych odstępach. Są one regulowane za pomocą zmiennej speed.

Tak więc najechanie kursorem myszy na dowolny z przycisków będzie powodowało rozpoczęcie cyklicznych wywołań funkcji change z parametrami zmieniającymi szerokość bądź wysokość warstwy. Konstrukcja tej funkcji jest podobna do tej w poprzednim przykładzie. Nieco inne jest jednak zachowanie w przypadku, kiedy przekroczone zostaną minimalne bądź maksymalne rozmiary warstwy. Niezbędne jest wtedy zatrzymanie wywołań funkcji change, co odbywa się przez wywołanie funkcji stop zerującej zegar.

 

Nowości Helionu

Statystyki

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