如何将HTML中的Mapping与js的alert函数链接起来



我一直在尝试在html中使用映射创建链接,我想这样做,当你点击网页上的一个点时,一个警告按钮会出现,说"可能的谋杀武器!">

现在我有……

<body id="House1">
<img src="png/1House.png" alt="House 1" usemap="#Items" height="1100px" width="1100px">
<map name="House1">
<area shape="rect" coords="739,917,856,1032" alt="Mug" href="alert.js">
</map>
</body>

在alert.js文件中我有…

alert("Possible Murder Weapon!");

我怎样才能以最简约的方式修复我的代码?(我对编程一窍不通)

您还必须通过在<img>usemap属性中指定地图的name(这里为mughouse)作为#mughouse:

将地图链接到您的图像。

let mug = document.getElementById("mug");
mug.onclick = function() {
alert('Possible Murder Weapon: the gate!');
};
<img usemap="#mughouse" src="https://jmorton01.files.wordpress.com/2011/11/192898_230170753687660_100000842118185_640954_2587551_o.jpg" alt="House 1" usemap="#Items">
<map name="mughouse">
<area shape="rect" coords="285,327,363,449" title="Here it is!" href="#" id="mug">
</map>

你可以试试下面的代码!!

<area shape="rect" coords="739,917,856,1032" alt="Mug" href="#!" onclick="alert('Possible Murder Weapon!');">

(或)带有脚本标签

<body id="House1">
<img src="png/1House.png" alt="House 1" usemap="#Items" height="1100px" width="1100px">
<map name="House1">
<area shape="rect" coords="739,917,856,1032" alt="Mug" href="#!" id="mug">
</map>
<script>
let mug= document.getElementById("mug");
mug.onclick = function () {
alert('Possible Murder Weapon!');
};
</script>
</body>

最新更新