在图像图中突出显示矩形答案

【问题标题】：Highlight rectangle in imagemap在图像图中突出显示矩形
【发布时间】：2017-03-17 02:03:03
【问题描述】：

有点新手问题，谷歌没有太多发现，至少最近没有。

我有一个简单的水平工具栏图像映射。我最终想要做的是在鼠标悬停在该区域上方时绘制一个 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>

【问题讨论】：

区域没有样式。构建一个真正的工具栏。几十年来一直不推荐使用像这样的图像布局。

标签： javascript css imagemap

【解决方案1】：

<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) 或者，请参阅此帖子：Make a border to the areas in the image maps 其中包括对ImageMapster 的引用，一个非常灵活的库，用于创建多种类型的图像映射。

我使用 ImageMapster 来动态创建分解零件图的图像映射。对于每个图像，其相关地图是根据数据库中的地图坐标创建的。当我滚动图像的各个部分时，映射区域的详细信息会显示在文本框中，就像您想要使用函数 tellname(txt) 一样。

【讨论】：