JavaScript DHTML/Style Layout/Clip

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

"clipBottom" Example

<html>
<head>
<style>
#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>



"clipLeft" Example

    
<html>
<head>
<style>
#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>



"clipRight" Example

    
<html>
<head>
<style>
#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>



"clipTop" Example

    
<html>
<head>
<style>
#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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Style_Layout/Clip&oldid=3901»