www.webdeveloper.com
Results 1 to 6 of 6

Thread: image zooming

  1. #1
    Join Date
    Oct 2005
    Posts
    3

    image zooming

    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.

  2. #2
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    do you need the image to keep the same size?
    not like this -> http://javascript.about.com/library/blzoom.htm#

  3. #3
    Join Date
    Oct 2005
    Posts
    3

    image zooming

    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%

  4. #4
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    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

  5. #5
    Join Date
    Sep 2005
    Posts
    33
    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

  6. #6
    Join Date
    Jun 2004
    Location
    4846′36″ N 910′48″ E
    Posts
    3,747
    you can have a custom cursor
    Code:
    a{
     cursor : url("zoom.cur");
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles