Draggable image in a DIV like google maps.

[duckxtales]

Hi,

I am trying to make this image here draggable within its div since many images for this site are huge due to scanned in articles.

<snip>

How do you think this should be done unless you have a better way?

I am upgrading their site to drupal from the old static site here:

<snip>

On the old site i had a js popup where it resized the window to the image dimensions, but currently looking for a better way like the draggable image within a div.

thanks.

[edited by: Robin_reala at 9:51 pm (utc) on May 16, 2007]
[edit reason] Removed URLs as per TOS #13 [webmasterworld.com] [/edit]

[Robin_reala]

To make an image move inside a smaller container you'd:

1. set overflow:hidden on the container, along with a height and width
2. record the mouse position on mouseDown and set off a timer that polls the mouse position
3. calculate the difference between the initial position and the current position and dynamically set the scrolltop and scrollleft properties of the container
4. cancel the polling timer on mouseup

Of course that involves a fair amount of JS. You might want to ask over in that forum [webmasterworld.com]. The easier method is just to set overflow:auto and a width and height on the container and let the user use the scrollbars :)

[edited by: Robin_reala at 10:00 pm (utc) on May 16, 2007]