javascript - html 画像領域 'coord' を点滅または光らせます …

Question

<area coord tagHTML画像を視聴者にとってより明確にしようとしています。各座標が視聴者に明確である限り、これらの座標の点滅効果などを作成するJavaScriptサンプルはありますか?

p/s: ペースト < エリアに問題があります。それが原因で、私のメッセージが完全に表示されませんでした。申し訳ありませんが再投稿してください

Answer 1

2つのソリューション：1つは、別の画像をオーバーレイします。オーバーレイ画像は、強調表示する領域を除いて透明になり、不透明度を十分に低く設定して、背後にあるものを確認できます。2つ目は、前述の「オーバーレイ」画像の背景画像として実画像を使用することです（オーバーレイ画像には、cssを使用する代わりに、オーバーレイ領域がすでに半透明である必要があります）。

例（バージョン1）

<span class='image_container'>
    <img id='base_image' src='base.png' >
    <img id='overlay_image' src='overlayimage.png' usemap='#yourmaphere'>
    <map name='yourmaphere'>
    ...
    </map>
</span>

.image_container {
    position:relative;
}

#overlay_image {
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
    filter: alpha(opacity = 50);
    /* text-decoration: blink; */ /*optional*/
}

例（バージョン2）

<img id='base_image' src='overlayimage.png' usemap='#yourmaphere'>
<map name='yourmaphere'>
...
</map>

#base_image {
    background: transparent url(base.png) no-repeat scroll top left;
}