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

About Vineet Verma

Developer/Blogger/Gamer/Lazy Couch Potato...:P Need PDF Books: Knowledge Base
This entry was posted in HTML. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s