CSS を使用して画像マップ上でマウスオーバー効果を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して画像マップ上でマウスオーバー効果を実現するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-08 03:06:01

オリジナル

244 人が閲覧しました

How Can You Achieve Mouseover Effects on Image Maps Using 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 のみを使用する簡単な回避策があります。

<div class="area">

ログイン後にコピー

.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 に増やすことで、微妙なマウスオーバー効果が得られます。

以上がCSS を使用して画像マップ上でマウスオーバー効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。