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 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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.