Question

一个新手问题并没有多少与谷歌相关，至少没有最新消息。

我有一个只是水平工具栏的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>

Answer 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)一样。

在imagemap中突出显示矩形

1 个答案: