Javascript 在imagemap中高亮显示矩形_Javascript_Css_Imagemap

Javascript 在imagemap中高亮显示矩形

javascript css

Javascript 在imagemap中高亮显示矩形,javascript,css,imagemap,Javascript,Css,Imagemap,这是一个新手问题，谷歌没有发现多少，至少最近没有发现我有一个imagemap，它只是一个水平工具栏。我最终要做的是，当鼠标悬停在区域上方时，在该区域上方绘制一个rgba矩形但我在这里根本做不了什么。区域元素的工作方式似乎有点不同。我如何在纯javascript中实现它。没有jquery <html> <body> <script> function tellname(txt){ document.getElementById("info").

这是一个新手问题，谷歌没有发现多少，至少最近没有发现

我有一个imagemap，它只是一个水平工具栏。我最终要做的是，当鼠标悬停在区域上方时，在该区域上方绘制一个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>


函数名（txt）{
document.getElementById（“info”）.innerHTML=txt；
}
.亮点：悬停{
轮廓：1px实心橙色；
}
区域没有样式。构建一个真正的工具栏。几十年来，人们一直不赞成使用图像来进行这样的布局。
<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>