CSS を使用した画像マップのマウスオーバーのスタイル設定

インタラクティブな Web ページを作成する場合、多くの場合、クリック可能な領域のある画像を含める必要があります。通常、これはイメージ マップを使用して実現されます。ただし、マウスオーバー時にこれらの領域をスタイル設定して追加のインタラクティブ性を提供することは困難であることがわかっています。

これまで、CSS を使用してこれらの領域をスタイル設定しようとしても、限定的な成功しか得られませんでした。

area { border: 1px solid #d5d5d5; }

CSS のみの解決策

幸いなことに、CSS のみを使用する簡単な回避策があります:

.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}
このアプローチでは、透明なブロックが画像上に配置され、それぞれがクリック可能な領域を表します。デフォルトで不透明度を 0 に設定し、ホバー時に不透明度を 0.2 に増やすことで、微妙なマウスオーバー効果が得られます。