'clip' Example : clip : CSS Attributes and Javascript Style Properties HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Attributes and Javascript Style Properties » clip »

'clip' Example



    
<html>
<body>
<img id="myImg" 
     src="http://www.navioo.com/style/logo.png" 
     height="80" 
     width="120" 
     border="0" 
     style="position:absolute;top:200px;left:375px">



        <button onclick="myImg.style.clip='rect(25px auto auto auto)'">
            Applying top value
        </button>
        <button onclick="myImg.style.clip='rect(auto 100px auto auto)'">
            Applying right value
        </button>
        <button onclick="myImg.style.clip='rect(auto auto 60px auto)'">
            Applying bottom value
        </button>
        <button onclick="myImg.style.clip='rect(auto auto auto 50px)'">
            Applying left value
        </button>
        <button style="position:absolute;top:250px;left:450px" 
                onclick="myImg.style.clip='rect(auto)'">Restore image</button>
</body>
</html>