Exécuter un son au click sur image

**ouranos88** · 24/03/2019, 02h00

Bonjour j'aimerais pouvoir executer un son quand je clique sur une zone cliquable j'ai donc ce code ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<img src="image2.jpg" id="page_internet_1" align="center"    usemap="#Secret" />
  <map name="Secret" >
 <area shape="rect" coords="0,0,500,500" onclick="JouerSon()" />
 </map>
<audio id="beep" src="1936.mp3">
</audio>
 
<script>
    function JouerSon() {
            var sound = document.getElementById("beep");
            sound.play();
        }
</script>

Mon code marche bien la mais le probleme c'est que si je viens a rajouter un lien dans ma balise area le son ne marche plus

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<area shape="rect" coords="0,0,500,500" onclick="JouerSon()" href="xd.php" />

qq aurait-il une solution à ce problème ?

**danielhagnoul** · 24/03/2019, 11h00

Mon code de test fonctionne bien :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<img src="https://danielhagnoul.developpez.com/images/mstile-150x150.png" id="page_internet_1" align="center" usemap="#Secret" />
<map name="Secret">
    <area shape="rect" coords="0,0,150,150">
</map>
<audio id="beep" src="https://www.soundjay.com/button/beep-01a.mp3"></audio>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    document.querySelector('map[name="Secret"] > area').addEventListener('click', ev => {
        document.querySelector('#beep').play();
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**ouranos88** · 24/03/2019, 19h16

Ok ton code marche bien mais dés que je rajouter une balise qui redirige vers un lien le son n'est plus produit et c'est justement çà que j'aimerai bien régler comme problème

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<map name="Secret">
    <area shape="rect" coords="0,0,150,150">
</map>

===>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <map name="Secret">
    <area shape="rect" coords="0,0,150,150" href="nomsite.php">
</map>

**danielhagnoul** · 24/03/2019, 21h40

Le comportement est logique, au clic le suivi du lien est prioritaire.

**ouranos88** · 25/03/2019, 18h00

je sais que c'est logique que le lien ai priorité mais justement j'aimerais bien avoir une zone cliquable qui puisse rediriger vers une autre page et en même temps pouvoir produire un son mais c'est soit l'un soit l'autre et je n'arrive pas à allier les 2

Invité · 25/03/2019, 18h51

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    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)
      });

**ouranos88** · 28/03/2019, 20h51

Merci pour ton code mais je n'y arrive pas ça fait 2h que j'essaie et ca ne marche tjr pas voci le code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 29/03/2019, 11h20

Bonjour,
sur ce coup là tu as perdu ta balise <audio id="beep" src="1936.mp3">.

Note très personelle :
Je navigue sans le son, la plupart du temps cela me saoule, alors imagine que, ayant été sur ton site, je clique sur le lien et ... rien ... il me faut attendre pour voir la suite ?? je fulmine après avoir cliqué « qu'est ce que c'est cette m...e ! » me dit une petite voie intérieure ... alors bye bye !

Exécuter un son au click sur image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager