He estado experimentando con el uso de mapas en html creando enlaces. Me gustaría que cuando hagas clic en un punto de la página web aparezca un botón de alerta que diga "¡Posible arma asesina!"
ahorita tengo..
<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>Dentro del archivo alert.js tengo...
alert("Possible Murder Weapon!");¿Cómo podría arreglar mi código de la manera más minimalista? (No sé mucho sobre codificación)
También tendrás que vincular el mapa a tu imagen especificando el name del mapa (aquí: mughouse ) en el atributo usemap de <img> como #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>¡Puedes probar simplemente debajo del código!
<area shape="rect" coords="739,917,856,1032" alt="Mug" href="#!" onclick="alert('Possible Murder Weapon!');">(o) con etiqueta de script
<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>