/    Sign up×
Community /Pin to ProfileBookmark

Moving images help!!!

Copy linkTweet thisAlerts:
Jan 03.2004

Hi,
I need help in pertinent to a “Survey form” and I would be very very grateful if anyone could help me out.

I have created a page which has objects (basically a gif file(s) ) of size Width=100 and Height=40 (along with a few questionnaires). The user can drag this image by clicking on it and also he can rotate it (This is done using HTML and JavaScript). Below these objects I have placed a browser (IE) image file (again a gif file) so that the user can move these objects and place it anywhere on the browser.gif. Also, there will be a Submit button down the page and when the user clicks on the Submit button the user will be taken to a PHP page which indicates “Thank you for your time” and data will be stored in a MySql database file.

Now, coming to the query. When the user drags the object(s) to anywhere in the browser.gif file I need to know the position as to where the user placed the objects and when the user hits the Submit button these position(s) need to be sent to the script and then in turn to the database file. I need to know as to how I can go about in doing this. I hope I was clear with my query and if you are not clear do write back.
Thank you

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SnowCrashJan 03.2004 — I'm not sure I got your problem right, could you post a link or sample code ?

But anyway, why not use object.style.top and object.style.left to get coords ?
Copy linkTweet thisAlerts:
@Khalid_AliJan 03.2004 — best option might be to add

document.mousedown

document.mouseup events

the browser event object stores the x and y cords of the current src element which you can append to the url of the sccript that processes it on server side or set those values as values for the hidden fields and submit the form to the script.....hope this points in a right direction...?
Copy linkTweet thisAlerts:
@ashwinauthorJan 03.2004 — This is the topic I was talking about..here is the link

http://www21.brinkster.com/sashwin/survey/moving.html

do you think finding out the co-ordinates and printing it is the best way???
Copy linkTweet thisAlerts:
@Khalid_AliJan 04.2004 — they are showing exactly the same idea that I recomended above..;-)
Copy linkTweet thisAlerts:
@ashwinauthorJan 04.2004 — thanks a lot. I will try and I will let you know whether I was successful.
Copy linkTweet thisAlerts:
@ashwinauthorJan 07.2004 — I was able to somehow know the coordinates of the screen. I will post the code asap, but a doubt arised.

As seen in the link (http://www21.brinkster.com/sashwin/survey/moving.html )

if the user places the image (Home Button) on the browser.gif file I will have some values for X and Y. What if the user scrolls and then places these images on the browser.gif file then defintely the values will change. I hope you understood what I meant. How do I fix this???. I guess I need to trace the values in pertinent to the image and not the rbowser

Also, is there anyway out for this other than finding out the coordinates. I mean when the user places the image button on the browser.gif file I need to know as to where the user placed the image button.
Copy linkTweet thisAlerts:
@SnowCrashJan 07.2004 — I don't think the scrolling of the window is an issue here, because if you use style.top, style.left distance is given in pixels in relation to the page. It doesn't matter if you scrolled or not. But anyway, you can retrieve the scrolled distance with the property

object.scrollY / object.scrollX in Mozilla/Ns

I'm not sure with IE, but I think there it would be object.scrollTop / object.scrollLeft. Otherwise check dhtml reference on msdn.microsoft.com
×

Success!

Help @ashwin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...