CSS Visibility and Clip Properties

An image can be made visible or invisible using CSS display properties and Javascript. After positioning the image on the page, create a function to trim parts or all of the image.

Clip:rect() style defines a rectangluar area. It uses four coordinates to specify the area being hidden or clipped. This example works with javascript function to clip parts of the image.

dog



  1. Set the image position in the style tag: img{position:absolute; top:150px}
  2. Create a function to trim the image on any four sides
    function trim(){
    document.getElementById("pic").style.clip="rect(0px 100px 100px 0px)";}
  3. Use the form button to call the function:
    <input type="button" value="Trim Image" onClick="trim()" />
  4. Create another function to return the image to its orginal size and the third function will make the image disappear.
    function gone(){
    document.getElementById("pic").style.clip="rect(0px 0px 0px 0px)";}
  5. Create a function to return the original image size. function resume(){
    document.getElementById("pic").style.clip="rect(0px 350px 550px 0px)"; }