Javascript Online designer

Hi,

I wanted to create something like: http://www.14kjewelry.net/virtual/designer.htm (this one looks horrible and only works on IE)

And it's not difficult to make. But the difficult thing is that I want the design transmitted to a PHP page which creates a bitmap (using GD). The only solution I could think of is sending the x and y coordinates of each image in a POST request. How do I do that? Each browsers seems to render the "designer" page I've created a bit differently, so x and y coordinates are different in each browser.

Sorry if you didn't understand me, I'm in a hurry.

Thanks and Regards,
The PHP Guy

But the *relative* coordinates of each image must be correct, browser to browser, no? So what do you care what the absolute coordinates are??

In other words, what's the difference if you have this:
main image x: 300, y: 240
sub image1 x: 340, y: 280
sub image2 x: 390, y: 320

versus this:
main image x: 260 y: 310
sub image1 x: 300 y: 350
sub image2 x: 350 y: 290

???

Surely you wouldn't render the entire HTML page? Surely you'd start from the main image, as a background, and then overlay the sub images at the correct *relative* positions. So what's the difficulty??

Thanks for the reply, but I'm using a different approach (download: http://www.mediafire.com/?lmej2qz2lj5)

But I still have a few problems:

IE renders the border a bit differently--border runs along the edge, not outside the div. (please use the test designer and drag a star to the top right corner to see what I'm talking about) How do I solve this problem?

Can any of you please test this on older browsers/different platforms? I've tested it on the latest versions of FF, Opera, Chrome, Safari and IE, all on Win XP. Thanks in advance.

What would be the best way to send the design to the server? The best way I could think of is to create a dynamic form with a hidden input element for each image in the work-area.

How to use the test designer: click on any of the stars in the red box to make a copy of it in the blue box. Stars in the blue box can be moved (click-and-drag) and removed(right click or double click). Hover the mouse over a star to see the left and top CSS attributes in the debug text box.

Thank you very much..

The PHP Guy

anybody? please??

anybody? please??
This may be of use. (http://www.my-debugbar.com/wiki/IETester/HomePage)

Frank