我一直在尝试在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>