PDA

View Full Version : Image Pan Script (DOM Drag & Drop)



FSX
08-06-2007, 11:03 AM
Hey, I' trying to make an image panning script. I've used the DOM Drag & Drop (http://www.dynamicdrive.com/dynamicindex11/domdrag/) script.

And this is what I've managed to do:
http://www.scrin.nl/imagepan/index.html

It is almost finished, but there are some bugs.

1. If you go the the image pan page for the first time in a browsing session in Firefox, the image isn't dragable.

2. In IE6 you can see the whole image, it overlaps the box.

In Opera it's working fine.

Can someone help me with this? The whole code you can find in the source.

shachi
08-06-2007, 06:49 PM
How about using a div with a background image instead of a whole image element?

FSX
08-06-2007, 08:49 PM
Yea, but that a good idea, thanks. But how can I use different images without changing the file?

shachi
08-07-2007, 11:03 AM
What do you mean use different images without changing the file? Which file? Which images?

FSX
08-08-2007, 05:28 PM
Sorry, I was unclear in explaining.

Now the imahe height and width are automatically get by javascript. If I want an other image I just change the src of the IMG tag.

If I use a div with the image as a background, wich solves the problem I have, but a DIV can't adept to the height and width of his background image. Then I have to set the panX and panY manually.

shachi
08-08-2007, 05:52 PM
Alright, so. First thing, it's a cache problem.
Second, the Drag.init script is called as soon as the script is loaded, however the image isn't thus you can't see the imageWidth and imageHeight on first load(displays 0).

FSX
08-08-2007, 06:44 PM
SO I have to load the image before Drag.init executes. Would a preloader work?

shachi
08-09-2007, 09:24 AM
Yes you have to preload the images before the script gets called OR you have to call the script after the image has loaded. A perloader? What preloader?

FSX
08-09-2007, 11:05 AM
I mean an image preloader.

shachi
08-09-2007, 12:51 PM
Do whatever you want, my job was to tell you the problem. :p