Not sure how to go about this javascript / image map / PHP problem

I am trying to figure out the best, or most efficient way of doing this.

My website is written in PHP on the server side, with a MySQL DB and using javascript and jQuery on the client side.

The user comes to this one specific page (i.e. map.php) which contains an image map. There are five different clickable areas on this map. Each area has a queue of images that will go down the queue, loading each image sequentially as the user clicks on the image. For example, if you click on area A then it might generate the queue A1.jpg, A2.jpg, A3.jpg, A4.jpg, map.jpg. First it will load image A1.jpg, when the user clicks on the image, it then loads A2.jpg etc. The last image returns them back to the main map.

When they click on one of the five areas on the main map, javascript removes all the clickable areas and creates a new area which is the whole image for the user to click on. Returning back to map.jpg also re-adds the five image map areas.

To make things a bit more complicated. None of the 5 areas have the same queue and you might not keep coming back to the same image queue.

For example, the first time you cl开发者_如何学Cick on area A you might go through A1, A2, A3, A4 and map. The second time they return to A the queue might be A3, A4, map. A trigger by viewing an external page (outside of map.php) might turn the next queue into A5, A3, A4, or A6, A3, A4 or A7, A3, A4. A final image queue could be A8, A9, A10, A11, A12, ... A18.

And image map area B, C, D and E can all have different image queues.

Now I am trying to think of how to do this but no matter how I try and write it, it seems overly complicated and there must be a better way. I thought of possibly storing each possible image queue in the DB and then store what "state" each user is at on map.php. But the database state might need to change and since the front-end is in javascript I wasn't sure how to do this. There's also the issue of pre-loading the images to try and get them as smooth as possible.

That's why I am here to try and ask for ideas and opions, try and bounce ideas around to help me think of a better way to do this.

Sounds like you are doing a google maps clone.

You can try and store the state server-side with in a session. When a user clicks on A1, you do an ajax request telling the server A1 was clicked, and the server responds with a list of images for the zoomed in area of A1.

This way when the user clicks zoom out, the server can respond with the proper set of images based on the previously clicked area.

You might consider storing the images in a hierarchical database. So image A1 has a parent image of A. You click zoom on A, do a query to get all images who have a parent of A and that gives you the new map.

Similarly when you click zoom out, you have A stored in the session, so you get all the images who have the same parent as A.

So all you need to store in the session is a queue clicked images. You push on the queue when you zoom in, pop off the queue when you zoom out.

You say each "queue" can change at a whim. If a client is halfway through traversing a queue, would it be acceptable for the client to just behave ignorant of an update, and continue to finish its current queue?

The client could still be aware of the latest updates, but only apply it updates when it finishes traversing the queue and returns to the map. This facilitates image preloading. It could begin preloading the images in latest versions of the queues, while continuing to traverse its current queue.