I have found from time to time that it is sometimes useful to clip and image used on a page using css. This allows for example a single image to be created and you only show the piece that is relivant, it is also useful if a user wished to upload an image as a avatar or profile picture but want only a particular part of the image displayed. As this is a css style it is easy to include in a style sheet or to appply via javascript. I have outlined below the manner in which it is used. It is worth noting that this works on elements that have an absolute position and not on elements that are relative.
The full image used in the example below is the site logo above. Using the following css tag I will reduce the image.
img.slim{
clip:rect(25px, 76px, 56px, 6px);
}
If you would like to try this out for yourself I have included a JavaScript function that will take the values you choose and clip the image to your requirements. The JavaScript used to achieve this is as follows.
function slim(){
var values = prompt("please enter the values you want to alter the image. Please enter them in the fashion (top, right, bottom, left).");
var elem = document.getElementById('imgslim');
elem.style.clip="rect("+values+")";
}
