1. Technology
Send to a Friend via Email

Image Zoom

Join the Discussion

Questions? Comments?

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 code into the head section of your page:

function findDOM(objectId) {
if (document.getElementById) {
return (document.getElementById(objectId));}
if (document.all) {
return (document.all[objectId]);}
}
function zoom(type,imgx,sz) {
imgd = findDOM(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 sises.

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 alterations to the code that are required are shown below in bold. 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="graphics/steve.jpg" width="66" height="92"><br />
<a href="#"
onclick="zoom('-','myimg',92/66)">Smaller</a> |
<a href="#"
onclick="zoom('+','myimg',92/66)">Bigger</a>

</div>

Note that this script does not work with Netscape 4.

Related Video
Add a Background Image to a Webpage

©2014 About.com. All rights reserved.