Entry
How can I resize a client side image?
How can I resize a client side image?
Mar 6th, 2000 05:11
Martin Honnen, frost terminal,
IE4/5 and NN6 simply allow to script
document.imageName.width = newWidth;
document.imageName.height = newHeight;
while with NN4 the image dimensions are readonly. You can however put a
layer over the image to which you write the image with the new
dimensions. The following code provides that falling back for IE4/5 and
NN6 on the above assigment. Note that with NN4 the layer put over the
image might cover other content as well when you increase the image
size as there is no reflow of the document content around the image.
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT>
function resizeImage (imageOrImageName, width, height) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
image.currentWidth = width;
image.currentHeight = height;
var layerWidth = image.width > width ? image.width : width;
var layerHeight = image.height > height ? image.height : height;
if (!image.overLayer) {
var l = image.overLayer = new Layer(layerWidth);
}
var l = image.overLayer;
l.bgColor = document.bgColor;
l.clip.width = layerWidth;
l.clip.height = layerHeight;
l.left = image.x;
l.top = image.y;
var html = '';
html += '<IMG SRC="' + image.src + '"';
html += image.name ? ' NAME="overLayer' + image.name + '"' : '';
html += ' WIDTH="' + width + '" HEIGHT="' + height + '">';
l.document.open();
l.document.write(html);
l.document.close();
l.visibility = 'show';
}
else {
image.width = width;
image.height = height;
}
}
function zoomImage (imageOrImageName, factor) {
var image = typeof imageOrImageName == 'string' ?
document[imageOrImageName] : imageOrImageName;
if (document.layers) {
var currentWidth = image.currentWidth ? image.currentWidth :
image.width;
var currentHeight = image.currentHeight ? image.currentHeight :
image.height;
}
else {
var currentWidth = image.width;
var currentHeight = image.height;
}
var width = parseInt(currentWidth * factor);
var height = parseInt(currentHeight * factor);
resizeImage(image, width, height);
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: resizeImage(document.images[0], 100, 100); void 0">
100 100
</A>
|
<A HREF="javascript: resizeImage(document.images[0], 190, 190); void 0">
200 200
</A>
|
<A HREF="javascript: zoomImage(document.images[0], 1.1); void 0">
zoom in 10%
</A>
|
<A HREF="javascript: zoomImage(document.images[0], 0.9); void 0">
zoom out 10%
</A>
<BR>
<IMG SRC="whatever.gif">
</BODY>
</HTML>
