ローテクソリューション
絶対位置を持つネストされた要素
少し余分な時間を費やす気がある場合は、Flash、Canvas、SVG、さらにはイメージ マップを使用せずに、これをかなり厳密に実現する方法があります。また、イメージ マップとは異なり、必要に応じて、関連するコンテンツを各ホットスポット内にネストできます (ポップアップなど)。
最も単純なケースでは、パズルのピースごとに 1 つの長方形のハイパーリンク ホットスポットを使用できます。明らかに、サポートできる形状の範囲が大幅に制限されます (重複する要素に干渉することはありません)。
ただし、そのハイパーリンク タグを使用して多数のスパン タグの子を指定し、それぞれに絶対位置 (ハイパーリンクを基準として) を指定し、画像の適切な部分を背景に適用すると、不規則に「構築」できます。重なり合う要素との干渉が比較的少なく、単一の不規則なホットスポットを占める画像形状。
実際には、イメージ (透過領域を含む) はスプライト ファイルとして扱われ、ハイパーリンク タグと子スパン タグがそれぞれ「スプライト ファイル」の 1 つの部分を占めます。画像の透明な部分のほとんどは、ハイパーリンク タグまたはスパン タグによって占有されません。
ほとんどの図形は、おそらくハイパーリンク タグと 4 ～ 10 スパンを使用して作成できます。確かに、形状が不規則であるほど、より多くのスパンが必要になる傾向があります。
イメージ マップ (または Flash、Canvas、SVG) を使用せずに、米国のマップ上の各州のホットスポットを作成するために、以前にこれを実行しましたが、思ったほど問題はありませんでした。各形状を適切な数の長方形に分割する方法の詳細を理解するには、少し時間が必要です。
キャッチ
モバイル デバイスでの丸め誤差
ここにキャッチがあります。Web ページがモバイル デバイスで拡大縮小されると (通常のページはほとんどの場合、小さいデバイスで拡大縮小されます)、丸め誤差が発生し、ハイパーリンク タグとスパン タグの px 配置が水平方向に少なくとも 1 ピクセル異なる可能性があります。および/または垂直。これは、デスクトップ ブラウザがスケーリングされている場合にも発生します。それは、デスクトップ ブラウザーが頻繁にスケーリングされないということだけです。
何が起こるかというと、各形状の異なる部分の間に 1 ピクセル程度の分離 (または重なり) が生じる傾向があります。多くの場合、それは非常に明白であり、視覚的に受け入れられない傾向があります。また、実装によっては、場所が 2 ピクセルまたは 3 ピクセルも異なる場合があります。発生すると解決が難しく、解決できる量には限界があります。
最後に確認したところ、Firefox は、スケーリングされたページで px 値を丸めてこの問題を回避するのに十分スマートな唯一のブラウザーです。単純なページでさえ丸め誤差に悩まされることが多いため、他のブラウザが最終的にそれをより適切にサポートすることを願っています.
ソリューション
ホットスポットから画像を分離する
丸め誤差は、ホットスポット (精度が重要でない場合) ではあまり問題になりません。実際に問題を引き起こすのは画像です (画像が本来あるべき場所に並んでいない場合)。
次の操作を行うことで、最悪の画像丸め誤差を回避できる場合があります。
- ホットスポットに画像のどの部分も表示しないことを除いて、上記と同じように、ホットスポット用の HTML コードのセットを 1 つ用意します。それらにすべて透明な背景を与えます。
- 画像用に別の HTML コードのセットを用意します。それぞれが、すべての画像を表示する単一の長方形の要素になります。
- 関連するホットスポットと同じ位置に各画像を配置します。
- ホットスポットのセットと画像のセットの両方が同じ z-index 順序であることを確認してください。すべてのホットスポットがすべての画像の上に表示されますが、ホットスポット内と画像内で順序が一貫している必要があります。
- ピースのホットスポットがドラッグされると、関連する画像の位置を更新して同じ位置に保ちます。実際には、画像がドラッグされている間、ホットスポットが影になります。
私が知っている新しいことは何もありませんが、これを開発する際の私の 2 つの主な注意点は、ie8+ とタッチ デバイスで動作する必要があるということです。したがって、これはフラッシュがなく（これは非常に簡単だったはずです）、キャンバスもありません（ばかげている）ことを意味します。jsとおそらくsvgが残っていますか？