イメージマップ内のハイライト矩形

初心者の質問のビットではなく、あまり新しくはないが、最近は何もグーグルでは光りません。イメージマップ内のハイライト矩形

私は単純に水平のツールバーであるイメージマップを持っています。私が最終的にしたいのは、マウスがマウスの上を移動するときに、領域のrgba矩形の上を上に描くことです。

しかし、私はここでそれほど多くすることはできません。エリアの要素はちょっと違うようです。どのように私は純粋なjavascriptでそれを行うのですか。 jqueryはありません。

<html> 
<body> 
<script> 
    function tellname(txt){ 
    document.getElementById("info").innerHTML=txt; 
    } 
</script> 
<style> 
    .highlight:hover { 
     outline: 1px solid orange; 
    } 
</style> 
    <img src="toolbar.png" usemap="#toolbar" /> 
    <map name="#toolbar"> 
     <area class="highlight" shape="rect" coords="0,0,25,25" onclick="tellname('Centre')"/> 
     <area class="highlight" shape="rect" coords="25,0,50,25" onclick="tellname('Reset Camera')" /> 
     <area class="highlight" shape="rect" coords="50,0,75,25" onclick="tellname('Camera Preset')" /> 
     <area class="highlight" shape="rect" coords="95,0,120,25" onclick="tellname('Stop Render')" /> 
     <area class="highlight" shape="rect" coords="120,0,145,25" onclick="tellname('Restart Render')" /> 
     <area class="highlight" shape="rect" coords="160,0,185,25" onclick="tellname('Pause Render')" /> 
     <area class="highlight" shape="rect" coords="190,0,205,25" onclick="tellname('Start Render')" /> 
    </map> 
    <div id='info'</div> 
</body> 
</html>

出典

2017-03-17 Matt

エリアにはスタイルがありません。実際のツールバーを構築する。そのようなレイアウトにイメージを使用することは、何十年も非難されています。 – Thomas

<map name=#toolbar"><map name="toolbar">でなければなりません。

しかし、マップとエリアでしばらくプレイしましたが、必要に応じて機能させることができませんでした。ホバーを<map>と<area>に設定する際に問題があります。たぶん専門家が理由を説明することができます。

（1）ここにあなたのリンクのために別々の画像を使用して、代替です：

<html> 
<head> 
<style type="text/css"> 
    img:hover { 
    border:2px solid red; 
} 
</style> 

</head> 
<body> 
<a href="page1.html"><img src="img_1.jpg" /></a> 
<a href="page2.html"><img src="img_2.jpg" /></a> 
<a href="page3.html"><img src="img_3.jpg" /></a> 
</body> 
</html>

（2）または、この記事を参照してください。ImageMapsterへの参照が含まれてMake a border to the areas in the image maps 、作成するための非常に柔軟なライブラリ多くの種類の画像マップ。

ImageMapsterを使用して、爆発した部品図の画像マップを動的に作成します。各画像について、関連マップはデータベース内のマップ座標から作成されます。画像のセクションをスクロールすると、関数tellname(txt)と同じように、マップされた領域の詳細がテキストボックスに表示されます。

出典

2017-03-17 03:47:13

イメージマップ内のハイライト矩形

答えて

関連する問題