Onclick sur images superposées

Onclick sur images superposées - HTML/CSS - Programmation

Marsh Posté le 05-04-2021 à 21:16:04    

Bonjour
J'ai 2 images superposées. Je souhaite déclencher un son en cliquant sur l'image supérieure (olaf.gif).
J'ai bien le son sur l'image souhaitée mais je perd tous les autres critères (dimensions olaf.gif, onClick et onMouseOut sur 5.png)
Merci de votre aide.  :pt1cable:  
 
 

Code :
  1. <script>
  2.   function play(){
  3.        var audio = document.getElementById("audio" );
  4.        audio.play();
  5.                  }
  6. </script>
  7.   
  8.     <td align="center" valign="middle"><img src="Images/olaf.gif" value="PLAY"  onclick="play()">
  9. <audio id="audio" src="Sound/TOON.wav" ></audio> width="100" height="75" alt="" onClick="this.src='Images/5.png';" onMouseOut="this.src='Images/5.png' /></td>

Reply

Marsh Posté le 05-04-2021 à 21:16:04   

Reply

Marsh Posté le 06-04-2021 à 10:02:55    

Colle ton code dans un éditeur gérant la coloration syntaxique, tu verras vitre ton erreur...
 

Spoiler :

<img /><audio></audio> balise non ouverte avec tes trucs de rollover />


---------------
D3
Reply

Marsh Posté le 06-04-2021 à 16:34:01    

Bonjour
 
Je vois bien le problème ... mais pas la solution.  
 

Reply

Marsh Posté le 06-04-2021 à 17:07:13    

Ça vas être chaud de t'aider alors...
 
Déjà met ton audio ailleurs dans ton code html, il n'a absolument pas besoin d'être à coté de l'image puisque tu l'appelles avec son id.
 
Et ensuite tu parles d'une "image supérieur", tu as 2 images l'une au dessus de l'autre ?
Si oui il faudrait peut-être commencer par mettre une deuxième balise image "fonctionnelle" non ?
 


---------------
D3
Reply

Marsh Posté le 07-04-2021 à 18:09:45    

voizins a écrit :

Bonjour
 
Je vois bien le problème ... mais pas la solution.  
 


<audio id="audio" src="Sound/TOON.wav" ></audio> width="100" height="75" alt=""  
 
Y'a rien qui te choque ? :whistle: Des attributs qui ne sont pas dans une balise HTML...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 11-04-2021 à 11:23:22    

Faudrait deja revoir les bases html / css IMO.

Reply

Marsh Posté le 11-04-2021 à 13:37:17    

C'est une évidence :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed