私は(ImageMapsterプラグインを使用して)画像マップを使用して、ユーザーが画像の特定の部分にカーソルを合わせることができるようにしています。これにより、画像の拡大版と追加情報が表示されます。
次に、別の視点を必要とする画像の他の部分を表示できるようにしたいと思います。これを行うには、ユーザーが少し回転した人物の画像である次の画像に移動して、一種の「3D効果」を作成します。これを行うには、ユーザーに矢印をクリックさせるか、キーボードの矢印キー(イメージマップなし)を使用します。これを行うには、画像のsrc属性を変更し、タイムスタンプを追加して、ブラウザが画像を再読み込みするようにします。
しかし、問題が発生します。イメージマップを持つイメージのsrcを変更すると、ブラウザーはイメージをリロードせず、タイムスタンプもリロードしません。ページのソースを確認したところ、src属性が正しく変更されました。
HTML:
<img id="test" src="image1.jpg" usemap="#map1" />
<map name="map1">
<area shape="poly" coords="...." href="#" />
</map>
JS:
function showPicture(){
var newImg = "image"+newindex+".jpg";
$("#test").removeAttr("usemap");
$("#test").attr("usemap", "#imgmap"+newindex);
$("#test").removeAttr("src");
$("#test").attr("src", newImg+"?" + new Date().getTime());
}
usemap属性を削除すると画像は再読み込みされますが、後で(別の)画像マップを追加すると再読み込みされません。新しい画像の読み込みが完了した後(load()機能で)画像マップを変更しようとしましたが、これでもブラウザが再読み込みされません。
誰かアイデアはありますか?
前もって感謝します。