如何通过单击表中的名称来突出显示选定的地图区域？

Question

我可以使用javascript更改所选区域的背景图像。当我在桌子上点击Mazandaran时，我希望突出显示Mazandaran的区域。我使用map tag.can有人帮助我吗？

HTML：

<table style="float:right;width:500px;height:500px;">
    <tr>
        <td><a href="#" target="#mazandaran">Mazandaran</a>
        </td>
    </tr>
</table>
<div id="iran3">
    <img src="img/newmap.png" usemap="#newiran" />
    <img id="overlay" src="" />
</div>
<map name="newiran" id="iran6">
    <area alt="mazandaran" shape="poly" href="#" id="mazandaran" coords="95,63,92,68,96,72,98,75,103,77">

css代码：

#iran3 {
    position:relative;
    width:300px;
    height:282px;
    overflow:hidden;
}
#iran3 > img:first-child {
    display:block;
    width: 100%;
}
#overlay {
    position: absolute;
    top:-200px;
    left: 0px;
}

javascript代码：

mazandaran.onmouseover = function () {
    overlay.src = 'img/mazandaran.png';
    overlay.style.left = '90px';
    overlay.style.top = '62px';
}

Answer 1

不幸的是，除非你准备好参与jquery和加载插件，否则基本的html和javascript的功能并不是很多。

您可以查看mapper.js等插件（www.netzgesta.de/mapper /）。