Only display top x pixels of an image?

Is there a way to display only the top x pixels of an image? I only want to show the top 200px of an image.

I cannot do this by making the image a background because I am using the image as a 开发者_开发技巧submit button to POST data. The image is an input of type "image".

---

The CSS property clip is probably what you are looking for. It allows you to specify the section of the image you would like to clip to. This is a nice option because it doesn't depend on a container to hide overflow:

  clip:rect(10px, 50px, 145px, 10px);

Here is a site that describes it, and lets you demo it: http://www.quackit.com/css/properties/css_clip.cfm

---

Put the image in a div. On the div, apply the CSS styles:

height: 200px;
overflow: hidden;

No need for Javascript.

Another solution (also without Javascript) would be to set the image as the background image on the div. That allows you to easier show a different part of the image as well, since you can specify the background position.

---

Make it the background of a 200px high div. You will need to give the div a width too. This can be done in a css file of inline with style="heigth:200px;width:___px;"