Entry
How do I hide certain parts of an image; How do I emulate a crop with Javascript?
Dec 19th, 2005 03:20
Trung Ha Pham, Randy Harmelink, Jake Carlson,
Although you could use JavaScript to dynamically set/alter the
width/height/top/left style characteristics, you only need HTML/CSS to
clip the image:
<html>
<style><!--
.clip {
width : 100;
height : 100;
overflow : hidden;
}
.clip2 {
position : relative;
top : -100;
left : -100;
}
--></style>
<body>
<span class=clip><img class=clip2 src="image.jpg"></span>
</body>
</html>
I only use IE, so I'm not sure how compatible this is with other
browsers.
Above work for IE, I asked this question in http://www.experts-exchange.
com/ and got result below
<html>
<body>
<div style="OVERFLOW: hidden; WIDTH: 78px; position: relative; HEIGHT:
78px">
<img src="http://www.faqts.com/images/faqts.gif" id="img1" style="LEFT:
-10px; POSITION: relative; TOP: -10px">
</div>
</body>
</html>
Work for IE 6.0, Opera 7.x, Fire Fox 1.x
