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