image zooming

[ngo van hinh]

I have a webpage with an image and two buttons (zoomin and zoomout).
I want:
- When I click on zoomin, the cursor will change into zoomin cursor whenever it is over the image, and similarly when I click on zoomout, it will change into zoomout cursor whenever it is over the image.
- When the cursor is zoomin, if I click on the image, the image will be zoomed in for 10%, and similarly for zoomout.

Anyone can help me to write code for the above purpose?

Thanks in advance.

[LiLcRaZyFuZzY]

do you need the image to keep the same size?
not like this -> http://javascript.about.com/library/blzoom.htm#

[ngo van hinh]

the image will be zoomed similarly to your example, but under the way as i proposed, it means when i click on the image and the cursor is in "zoomin" state, the image will be larger by 10%

[LiLcRaZyFuZzY]

well, the cursor change can be done in css, if you have the cursor image url somewhere
then you will have to run the script in the event of a click

[d4p41n]

Hi ngo_van_hinh!

i dont think its possible to change the cursor into a loupe...
CSS Cursor property

maybe it works when you use a div tag, which appears when you are above the image... not sure if that works...

best regards,
d4p41n

[LiLcRaZyFuZzY]

you can have a custom cursor

a{
 cursor : url("zoom.cur");
}