私はかなり大きな古い学校のHTML画像マップを作成しました。エリアタグの上にマウスを置くと、マップ全体を置き換える別の画像が読み込まれます。全部で30個のマウスオーバー画像があり、読み込みの遅延を避けるために、jQueryを使用してそれらをプリロードしました。
Firebug Netパネルには、ページの読み込み時にすべての画像が正常に読み込まれていることが表示されます（マウスオーバーはまだトリガーされていません）。ここで、ある領域にマウスを合わせると、firebugは、この画像が2回目に要求されていることを示します。これは、firebugの数行上にファイル名がはっきりと表示されているにもかかわらずです。
これは正常な動作ですか？プリロードは機能しているようです...しかし、マウスオーバーはサーバーに画像を取得するためのリクエストを送信し、画像が交換されるまでに1〜2秒の遅延が発生します。
これはすべてストレートHTMLであり、AJAXは含まれていません。
どうも
ブラウザが画像を再ダウンロードしないことを認識できるように、Webサーバーのキャッシュ構成を微調整する必要があります。
Firebug が開いていないときに 1 ～ 2 秒の遅延が見られますか? 私は同様の問題を抱えており、実際に画像を再度要求しているかどうかを実際に判断することはできませんでした. ログを追跡しても、新しいリクエストは表示されません。また、Safari のインスペクターを調べたときにこの動作が見られなかったので、Firebug のせいだと思いました。
特定の部分の特定の画像内の複数のページに、1 つの画像をリンクさせることができます。
これは、Html での画像のマッピングと呼ばれます。
画像のどの領域をどこにリンクするかを指定するだけです。
以下の例では、マウスを左上隅に置くと xyz.com にリンクされます.... 右下隅に..すると abc.com にリンクします。
<img src="test.jpg" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.example.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.example.com">
</map>
上記の例では、長方形の画像マッピングのみを使用しました。円や三角形など、いくつかの異なる形状を使用できます。可能な形状は次のとおりです。