Image clipping

by epblog

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Bosque_Encantado%2C_Parque_nacional_de_Garajonay%2C_La_Gomera%2C_Espa%C3%B1a%2C_2012-12-14%2C_DD_19.jpg/500px-Bosque_Encantado%2C_Parque_nacional_de_Garajonay%2C_La_Gomera%2C_Espa%C3%B1a%2C_2012-12-14%2C_DD_19.jpg" style="height: 200px; width: 200px; position: absolute;"
id="myimgregular"
/>

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Bosque_Encantado%2C_Parque_nacional_de_Garajonay%2C_La_Gomera%2C_Espa%C3%B1a%2C_2012-12-14%2C_DD_19.jpg/500px-Bosque_Encantado%2C_Parque_nacional_de_Garajonay%2C_La_Gomera%2C_Espa%C3%B1a%2C_2012-12-14%2C_DD_19.jpg" style="height: 200px; width: 200px; position: absolute; top: 220px;"
id="myimgclipped"
/>

CSS

#myimgregular
{
    border: 1px green solid;
}

#myimgclipped
{
    border: 1px red solid;
    clip: rect(0px, 200px, 20px, 0px);
}

JavaScript

//note the clipping only works when the position of the image is set to absolute or fixed - try changing it.

//rect is apparently the only shape that is possible for now.
//the 4 values of the rect are length - how much to trim away from top, right, bottom, and left (clockwise).

//however, note that the way these four properties work is absolutely insane. let's say you want to get only a slice off the top of the image