1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <!DOCTYPE html>
<html>
<body style="background-color:#190C00;">
<head>
<link rel="stylesheet" href="escape_room.css">
<meta charset="UTF-8"/>
<title> Escape Room </title>
</head>
<img src="main_room.jpg" id="main_room" alt="Plan" usemap="#Secret" />
<map name="Secret" >
<area shape="rect" coords="0,0,500,500" onclick="ev()" href="Lumiere.php"/>
<area shape="rect" coords="500,500,1000,1000" onclick="ev()" href="code.php" />
<area shape="rect" coords="105,170,135,115" href="Potion1.html" />
<area shape="rect" coords="105,40,135,90" href="Potion2.html" />
<area shape="rect" coords="1,0,10,915" href="Escape ordi.html" />
<script>
document.querySelector('map[name="Secret"] > area').addEventListener("click", function(ev) {
ev.preventDefault(); // désactive l'action par défaut (lien href)
document.querySelector("#beep").play();
window.setInterval(function() {
window.location.href = ev.target.getAttribute("href"); // active l'action (lien href)
}, 1000); // 1 seconde (à ADAPTER à la durée du son)
});
</script>
</map>
</body>
</html> |
Partager