krok_9 

po polsku


Skalowanie zdjêæ (MSIE)

DHTML daje nam mo¿liwo¶æ dynamicznej zmiany rozmiarów rysunków. Wystarczy umie¶ciæ rysunek na warstwie i nadaæ mu atrybut WIDTH=100%. W celu zmiany rozmiarów rysunku nale¿y zmieniæ rozmiary warstwy, a rysunek dostosuje siê sam. Rozmiary warstwy zmieniamy zgodnie z poni¿szym schematem:

document.all['nazwa_warstwy'].style.width = szeroko¶æ
document.all['nazwa_warstwy'].style.height = wysoko¶æ
W przypadku, gdy warstwa nie mia³a zdefiniowanej wysoko¶ci lub szeroko¶ci wystarczy zmieniæ jedn± z tych w³a¶ciwo¶ci. Druga siê dostosuje sama. Sztuczka ta dzia³a tylko w przegl±darce Microsoft Internet Explorer.






Poni¿szy przyk³ad pokazuje w jaki sposób mo¿na skalowaæ zdjêcia umieszczone na warstwie. Niestety dzia³a on tylko w przegl±darce Internet Explorer.



<HTML>

  <HEAD>

    <META
HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1250">

    <STYLE
TYPE="text/css">

    <!--

        #warstwa { position:
absolute; top:100; width:300; }

    -->

    </STYLE>

    <SCRIPT
LANGUAGE="JavaScript">

      w=1;

      function skala()

        { if (w<=0.1) {w=0.1}

          document.forms["skaluj"].ekran.value=100*w;

          document.all["warstwa"].style.width=300*w; }

    </SCRIPT>

  </HEAD>

  <BODY
BGCOLOR="#6FB20F">

    <FORM
NAME="skaluj">

      <INPUT
TYPE="Button"
VALUE="<<"
onClick="w=w-0.1;skala()">

      <INPUT
TYPE="Text"
NAME="ekran"
VALUE="100" SIZE="3"
>
%

      <INPUT
TYPE="Button"
VALUE=">>"
onClick="w=w+0.1;skala()">

    </FORM>

    <DIV
ID="warstwa"><IMG
SRC="../rys/comp.jpg" WIDTH="100%"></DIV>


  </BODY>

</HTML>




Przedstawiony sposób skalowania zdjêæ dzia³a tylko w przegl±darce Internet Explorer. W tym przypadku wymiary zdjêcia dostosowuj± siê do wymiarów warstwy. W przegl±darce firmy Netscape jest niestety odwrotnie.
  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • pajaa1981.pev.pl