Zooming Image Rollovers

Zooming Rollovers These rely on the dynamic resizing of images and only work in IE4+ and NS6+. You only require one image per rollover but how you set them up can change how effective the rollovers are from being useful to just plain annoying.

First lets set up a single zooming rollover.

If you have set up rollovers before you will notice that this method is very different. The image is not wrapped in an anchor tag so you can have zooming rollovers without them having to be a link. The mouse over and out are added to the <img> tag. The image does not even need to be named.

NOTE: NS4 does not allow you to add onMouseOver/Out to images but as the zoom doesn't work in NS4 anyway this is a moot point.

You will notice in the calls JSFX.zoomIn and JSFX.zoomOut a parameter "this" is passed. The "this" parameter refers to the element that was moused over/out and in this case is the image. The "this" parameter is a keyword and is part of the JavaScript language.

The functions JSFX.zoomIn and JSFX.zoomOut are not standard JavaScript functions. They are defined in the external JavaScript file JSFX_ImageZoom.js, so to complete our script we need to "include" the external JavaScript file. We do this as follows

So the complete file would look like this

</body>
</html>

Now you might have noticed that when you moused over the image on this page that as the image zoomed in the whole page moved. In a web page this is definitely distracting to the user and not the desired effect.

The way around this is to surround the image with enought space to "zoom into". You can probably do this with an absolute positioned <div> but the example here uses a simple table.

Take a look at this 5 image menu.

As you can see, as you mouse over the images they zoom in but the page around them does not move. This is done by placing each image in a cell of the table. Each cell is defined as follows.

As you can see the width & height of the cell are defined to be larger than the image. Images are centered vertically in the cell by default be we have added align="center" to center the images horizontally. If you know HTML you can experiment with the valign and align properties to get different effects.

The full code of the table looks like this :-

As you can see, the only thing that changes between each cell is the source of the image.

Here are 3 examples that use the above technique, Each use different valign and align attributes.

1) align="center"
2) align="center" valign="top"
3) align="left"