このjavascript/image map/PHPの問題についてのわからない

Question

私はこれを行うための最良の、または最も効率的な方法を見つけようとしています。

私のウェブサイトは、サーバー側でPHPで書かれており、MySQL DBがあり、クライアント側でjavascriptとjQueryを使用しています。

ユーザは、イメージマップを含む1つの特定のページ（map.php）に移動します。この地図には5つの異なるクリック可能エリアがあります。各領域には、ユーザーがイメージをクリックするたびに、各イメージを順番に読み込むキューの下にあるイメージのキューがあります。たとえば、エリアAをクリックすると、A1.jpg、A2.jpg、A3.jpg、A4.jpg、map.jpgというキューが生成されます。まず、画像A1.jpgをロードします。ユーザーが画像をクリックすると、A2.jpgなどがロードされます。最後の画像からメインマップに戻ります。

メインマップ上の5つの領域のいずれかをクリックすると、javascriptはクリック可能な領域をすべて削除し、ユーザーがクリックするための画像全体である新しい領域を作成します。 map.jpgに戻って、5つのイメージマップエリアも再追加します。

物事を少し複雑にする。 5つの領域のいずれも同じキューを持たず、同じイメージキューに戻ってこない場合もあります。

たとえば、最初にエリアAをクリックすると、A1、A2、A3、A4、およびマップが表示されます。 2回目にAに戻ると、キューはA3、A4、mapのようになります。外部のページ（map.phpの外）を見ることによってトリガーすると、次のキューがA5、A3、A4、またはA6、A3、A4またはA7、A3、A4に切り替わります。最終的な画像キューは、A8、A9、A10、A11、A12、... A18であってもよい。

イメージマップ領域B、C、DおよびEはすべて異なるイメージキューを持つことができます。

私はこれをどうやって行うのか考えようとしていますが、どうしようもなく複雑なように思えますし、より良い方法が必要です。私は可能性のある各イメージキューをDBに格納し、各ユーザがmap.php上の "状態"を保存することを考えました。しかし、データベースの状態を変更する必要があり、フロントエンドがjavascriptになっているので、これを行う方法がわかりませんでした。また、画像をプリロードしてできるだけ滑らかにするという問題もあります。

私はここで、アイデアやアピオンを試してみることにしています。これを行うより良い方法を考えるのに役立つアイデアを試してみてください。

Answer 1

あなたはGoogleマップのクローンをやっているような感じです。

セッションでサーバー側の状態を試して保存できます。ユーザーがA1をクリックすると、サーバーA1がクリックされたことを伝えるajax要求が行われ、サーバーはA1のズームインされた領域の画像のリストで応答します。

この方法で、ユーザーがズームアウトをクリックすると、サーバーは以前にクリックされた領域に基づいて適切なイメージセットで応答することができます。

画像を階層データベースに格納することを検討することがあります。したがって、画像A1にはAの親画像があります。Aをクリックすると、Aを親とし、新しい地図を与えるすべての画像を取得するためのクエリを実行します。あなたはA.

と同じ親を持つすべての画像を取得するので、あなたがセッションに格納する必要があるすべてのキューがクリックされたズームアウトクリックすると同様に、あなたがセッションに保存されている

、画像。ズームインするときにキューを押し、ズームアウトするときにキューをポップします。

Answer 2

あなたは、それぞれの「キュー」が気まぐれに変わることができると言います。クライアントが待ち行列の途中を通過している場合、クライアントが更新を知らずに動作し、現在の待ち行列を終了し続けることは許容されますか？

クライアントは最新のアップデートを認識している可能性がありますが、キューをトラバースしてマップに戻るときにのみ更新を適用します。これにより、画像のプリロードが容易になります。キューの最新バージョンで画像をプリロードし、現在のキューを横断し続けることができます。