Image Zoom

How would you like to offer visitors to your web page the opportunity to decide for themselves how big the images you are displaying on the page should be. Well now you can.

The image below is initially displayed at a certain default size but you can alter the size that the image appears to be by clicking multiple times on the links below the image. You get to decide (within limits) how big or small the image will appear.

So the next step is to incorporate the same option into your own web page. To do this you must first place the following JavaScript code into your page:

function zoom(type,imgx,sz) {
imgd = document.getElementById(imgx);
if (type=="+" && imgd.width < 175) {
imgd.width += 2;imgd.height += (2*sz);}
if (type=="-" && imgd.width > 20) {
imgd.width -= 2;imgd.height -= (2*sz);}

You can alter the minimum and maximum sizes from 20 and 175 pixels respectively if different sizes are more appropriate to your images. You can also make the increment larger than 2 if you want to make changing the size of the image faster by providing fewer sizes.

Now all that remains to do is to modify the code in your web page that displays the image to add the links that allow it to be resized. The second parameter for the resize links should be the same name as the id attribute of the image and the third parameter should be the image height divided by its width.

<div align="center"><img id="myimg" alt=""
src="img/steve.jpg" width="66" height="92"><br />
<a href="#"
onclick="zoom('-','myimg',92/66)">Smaller</a> |
<a href="#"


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow