CSS を使用して画像マップ上のマウスオーバー効果のスタイルを設定できますか?

CSS を使用して画像マップ上のマウスオーバー効果のスタイルを設定できますか?

リンクを含む画像を含む Web ページの作成は、イメージマップ。ただし、マウスオーバー時に領域の形状をスタイル設定することで対話性を追加すると、ユーザー エクスペリエンスを向上させることができます。 CSS を使用してこれは可能ですか?

次のコードを考えてみましょう:

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

試みにもかかわらず、このコードはマウスオーバー時に領域の形状をスタイル設定できません。

CSS のみの解決策:

イメージ マップ アプローチを使用する代わりに、CSS の :hover 疑似クラスを使用する代替方法を使用できます。以下に例を示します:

<div class="area"></div>
<div class="area"></div>
<img src="image.jpg" />

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

説明:

• 画像は最下層に配置されます。
• 2 つの div要素は不透明度 0 で画像の真上に配置されます。
• これらの div 要素の上にマウスを置くと、不透明度が 0.2 に増加し、その背後にあるコンテンツが表示されます。

この方法は、CSS を使用して画像の特定の領域にマウスオーバー効果を追加するシンプルかつエレガントな方法を提供します。

以上がCSS を使用して画像マップ上のマウスオーバー効果のスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。