JQuery image overlay (and get rid of imagecopymerge)

Question

Hi friends,

In my project site I am merging a base image (a map) with markers (the same marker always but repeated) according to a table in MySQL using the php function imagecopymerge.

I want to migrate this to jQuery since the refreshing of the image flicks, which is very ugly.

Could you please guide me to the best solution?

Thanks a lot.

Answer 1

Am I right in thinking you have a static image which gets updated via user interaction? The updates get handled on the server and a new "merged" image is sent back to the client?

If that's the case, you may be able to replace it all with a fair bit of jquery. There'll be differences though.

I'd use the following strategy:

1. Deliver the static background map to the client.
2. Change whatever function that currently posts back to the server so it calls a jquery function.
3. This function should create a new image (your marker) and put it over the appropriate spot on the map. You should be able to do this with css.
4. The function should also keep track of the location of these markers so their position can be sent back to the server when the user is done.

I'm happy to give more detailed suggestions if you can tell me exactly what you need to be able to do.

Update

Ok, so based on your comment, I understand that there's a database table that dictates the contents of the map. It's not necessarily updated by the current user, but you frequently check for changes.

You're already using ajax to do most of the work, so changing to jquery wouldn't do too much. I think maybe you just need to think of a new way to handle the display of the new image.

You could try a double-buffering technique by having two images in the same place in the page, only one of which is properly visible at any time.

1. Do the same call to the server to check for changes and retrieve an image. I'm assuming you're getting a new url for the update image, but if not, you may have to do something like that.
2. Update the src of the image that isn't being displayed on the page
3. Show the hidden image but only after setting its opacity to 0.
4. Using jquery, fade the new image in and the old image out.

If done properly, the effect could be more like a smooth update of the map rather than a flicker.