Entry
How can I animate zooming in and out of an image?
Jan 28th, 2001 05:22
Martin Honnen,
The following code works with IE4+ and NN6 which allow dynamically
setting of the width and height of an IMG element with
document.imageName.width = someWidth
document.imageName.height = someHeight
<HTML>
<HEAD>
<TITLE>
Image zoom animation
</TITLE>
<SCRIPT>
ImageZoom.prototype.ratio = 2;
ImageZoom.prototype.step = 10;
ImageZoom.prototype.delay = 100;
function ImageZoom (args) {
this.id = ImageZoom.objects.length;
ImageZoom.objects[this.id] = this;
for (var p in args)
this[p] = args[p];
this.initZoom();
}
function ImageZoom_initZoom () {
this.startWidth = this.width = parseInt(this.imgElement.width);
this.startHeight = this.height = parseInt(this.imgElement.height);
if (typeof this.endWidth == 'undefined')
this.endWidth = this.startWidth * this.ratio;
if (typeof this.endHeight == 'undefined')
this.endHeight = this.startHeight * this.ratio;
this.zoom();
}
ImageZoom.prototype.initZoom = ImageZoom_initZoom;
function ImageZoom_zoom () {
if (this.step > 0) {
if (this.width + this.step > this.endWidth)
this.width = this.endWidth;
else
this.width += this.step;
if (this.height + this.step > this.endHeight)
this.height = this.endHeight;
else
this.height += this.step;
}
else {
if (this.width + this.step < this.endWidth)
this.width = this.endWidth;
else
this.width += this.step;
if (this.height + this.step < this.endHeight)
this.height = this.endHeight;
else
this.height += this.step;
}
this.imgElement.width = this.width;
this.imgElement.height = this.height;
if (this.width != this.endWidth || this.height != this.endHeight)
this.tid = setTimeout('ImageZoom.objects[' + this.id + '].zoom();',
this.delay);
}
ImageZoom.prototype.zoom = ImageZoom_zoom;
ImageZoom.objects = new Array();
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="gui">
<INPUT TYPE="button"
VALUE="zoom 200%"
ONCLICK="new ImageZoom({imgElement: document.imageName})"
>
<INPUT TYPE="button"
VALUE="zoom 50%"
ONCLICK="new ImageZoom({imgElement: document.imageName, step: -
10, ratio: 0.5})"
>
<INPUT TYPE="button"
VALUE="zoom out"
ONCLICK="new ImageZoom({imgElement: document.imageName, step: -
10, endWidth: 1, endHeight: 1})"
>
</FORM>
<IMG NAME="imageName"
SRC="kiboInside.gif"
WIDTH="1" HEIGHT="1"
ONLOAD="new ImageZoom ({imgElement: this, endWidth: 200,
endHeight: 150});"
>
</BODY>
</HTML>
Note that the IMG starts with initial WIDTH/HEIGHT="1" and zooms out to
that value instead of 0 due to a bug in NN6.
Here follows the extension of the above code for NN4 where you need to
rewrite a layer with an IMG tag of varying dimensions. The code is of
restricted use as NN4 can't reflow the page so a growing image might
hide other page elements.
<HTML>
<HEAD>
<TITLE>
Image zoom animation
</TITLE>
<SCRIPT>
ImageZoom.prototype.ratio = 2;
ImageZoom.prototype.step = 10;
ImageZoom.prototype.delay = 100;
function ImageZoom (args) {
this.id = ImageZoom.objects.length;
ImageZoom.objects[this.id] = this;
for (var p in args)
this[p] = args[p];
this.initZoom();
}
function ImageZoom_initZoom () {
if (!document.layers || document.layers && !this.imgElement.ol) {
this.startWidth = this.width = parseInt(this.imgElement.width);
this.startHeight = this.height = parseInt(this.imgElement.height);
}
else {
this.startWidth = this.width =
parseInt(this.imgElement.ol.document.images[0].width);
this.startHeight = this.height =
parseInt(this.imgElement.ol.document.images[0].height);
}
if (typeof this.endWidth == 'undefined')
this.endWidth = this.startWidth * this.ratio;
if (typeof this.endHeight == 'undefined')
this.endHeight = this.startHeight * this.ratio;
if (document.layers) {
if (!this.imgElement.ol) {
var ol = this.imgElement.ol = new Layer(this.width);
ol.left = this.imgElement.x;
ol.top = this.imgElement.y;
ol.bgColor = document.bgColor;
}
this.ol = this.imgElement.ol;
}
this.zoom();
}
ImageZoom.prototype.initZoom = ImageZoom_initZoom;
function ImageZoom_zoom () {
if (this.step > 0) {
if (this.width + this.step > this.endWidth)
this.width = this.endWidth;
else
this.width += this.step;
if (this.height + this.step > this.endHeight)
this.height = this.endHeight;
else
this.height += this.step;
}
else {
if (this.width + this.step < this.endWidth)
this.width = this.endWidth;
else
this.width += this.step;
if (this.height + this.step < this.endHeight)
this.height = this.endHeight;
else
this.height += this.step;
}
if (document.layers) {
var ol = this.ol;
var html = '';
html += '<IMG SRC="' + this.imgElement.src + '"';
html += ' WIDTH="' + this.width + '"';
html += ' HEIGHT="' + this.height + '"';
html += '>';
ol.document.open();
ol.document.write(html);
ol.document.close();
ol.clip.width =
this.width < this.imgElement.width ? this.imgElement.width :
this.width;
ol.clip.height =
this.height < this.imgElement.height ? this.imgElement.height :
this.height;
ol.visibility = 'show';
}
else {
this.imgElement.width = this.width;
this.imgElement.height = this.height;
}
if (this.width != this.endWidth || this.height != this.endHeight)
this.tid = setTimeout('ImageZoom.objects[' + this.id + '].zoom();',
this.delay);
}
ImageZoom.prototype.zoom = ImageZoom_zoom;
ImageZoom.objects = new Array();
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="gui">
<INPUT TYPE="button"
VALUE="zoom 200%"
ONCLICK="new ImageZoom({imgElement: document.imageName})"
>
<INPUT TYPE="button"
VALUE="zoom 50%"
ONCLICK="new ImageZoom({imgElement: document.imageName, step: -
10, ratio: 0.5})"
>
<INPUT TYPE="button"
VALUE="zoom out"
ONCLICK="new ImageZoom({imgElement: document.imageName, step: -
10, endWidth: 1, endHeight: 1})"
>
</FORM>
<IMG NAME="imageName"
SRC="kiboInside.gif"
WIDTH="1" HEIGHT="1"
ONLOAD="new ImageZoom ({imgElement: this, endWidth: 200,
endHeight: 150});"
>
</BODY>
</HTML>
