[SOLVED] How to link Mapping in HTML with the js alert function

How to link Mapping in HTML with the js alert function

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)

Solution

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>