How to link Mapping in HTML with the js alert function-CodePudding

I've been experimenting with using mapping in html creating links I'd like to make it so that when you click on a spot on the webpage an alert button would come up saying "Possible Murder Weapon!"

Right now I have..

<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>

Inside the file alert.js I have..

alert("Possible Murder Weapon!");

How would I be able to fix my code in the most minimalistic way? (I don't know a ton about coding)

CodePudding user response：

You can try simply below code !!

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

(or) with script tag

<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>

CodePudding user response：

You will also have to link the map to your image by specifying the map's name (here: mughouse) in the <img>'s usemap attribute as #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>