JavaScript DHTML/Style Layout/Clip

Материал из Web эксперт
Перейти к: навигация, поиск

"clipBottom" Example

   <source lang="html4strict">

<html> <head> <style>

  1. myImage {position:absolute; 
     top:224px; 
     left:75px; 
     clip:rect(0,300,225,0)}

</style> <script language="JavaScript"> 

   function function1() {
       document.all.myImage.style.clip = "rect(0,300,225,0)"
   } 
   function function2() {
       document.all.myImage.style.clip = "rect(0,300, 50,0)";
   }

</script> </head> <body bgcolor="#EEEEEE" bottommargin="100"> <img src="http://www.wbex.ru/style/logo.png" id="myImage"> <input type="button" value="Restore" onClick="function1();"> <input type="button" value="Clip bottom 50" onClick="function2(50);"> </body> </html> 


     </source>


"clipLeft" Example

   <source lang="html4strict">

<html> <head> <style>

  1. myImage {position:absolute; 
     top:224px; 
     left:75px; 
     clip:rect(0,300,225,0)}

</style> <script language="JavaScript"> 

   function function1() {
       document.all.myImage.style.clip = "rect(0,300,225,0)"
   } 
   function function5() {
       document.all.myImage.style.clip = "rect(0,300,225,50)";
   }

</script> </head> <body bottommargin="100"> <img src="http://www.wbex.ru/style/logo.png" id="myImage"> <input type="button" value="Restore" onClick="function1();"> <input type="button" value="Clip left 50" onClick="function5(50);"> </body> </html> 

     </source>


"clipRight" Example

   <source lang="html4strict">

<html> <head> <style>

  1. myImage {position:absolute; 
     top:224px; 
     left:75px; 
     clip:rect(0,300,225,0)}

</style> <script language="JavaScript"> 

   function function1() {
       document.all.myImage.style.clip = "rect(0,300,225,0)"
   } 
   function function3() {
       document.all.myImage.style.clip = "rect(0,50,225,0)";
   }

</script> </head> <body bottommargin="100"> <img src="http://www.wbex.ru/style/logo.png" id="myImage"> <input type="button" value="Restore" onClick="function1();"> <input type="button" value="Clip right 50" onClick="function3(50);"> </body> </html> 

     </source>


"clipTop" Example

   <source lang="html4strict">

<html> <head> <style>

  1. myImage {position:absolute; 
     top:224px; 
     left:75px; 
     clip:rect(0,300,225,0)}

</style> <script language="JavaScript"> 

   function function1() {
       document.all.myImage.style.clip = "rect(0,300,225,0)"
   } 
   function function4() {
       document.all.myImage.style.clip = "rect(50,300,225,0)";
   }

</script> </head> <body bgcolor="#EEEEEE" bottommargin="100"> <img src="http://www.wbex.ru/style/logo.png" id="myImage"> <input type="button" value="Restore" onClick="function1();"> <input type="button" value="Clip top 50" onClick="function4(50);"> </body> </html> 


     </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Style_Layout/Clip&oldid=3901»