Add zooming effect to images on your website

You must have wondered, how to add zooming effect to an image.
Its pretty simple to do....

A simple attribute of <img> has the capbility of doing it

<img src="http://www.celebrity-pictures.ca/Celebrities/Katrina-Kaif/Katrina-Kaif-i105058.jpg" 

onmousedown="this.height=450;this.width=600" 

onmouseup="this.height=150;this.width=200" width=200 height=150>

Output :





Here are few of the event handlers :

Attribute	Description
onabort	Script to be run when loading of an image is interrupted
onclick	Script to be run on a mouse click
ondblclick	Script to be run on a mouse double-click
onmousedown	Script to be run when mouse button is pressed
onmousemove	Script to be run when mouse pointer moves
onmouseout	Script to be run when mouse pointer moves out of an element
onmouseover	Script to be run when mouse pointer moves over an element
onmouseup	Script to be run when mouse button is released
onkeydown	Script to be run when a key is pressed
onkeypress	Script to be run when a key is pressed and released
onkeyup	Script to be run when a key is released

If you want a effect that gradually grows the image, you can refer to the link : http://javascript.internet.com/image-effects/growing-image.html