5546 sujets

Sémantique web et HTML

Onclick sur 2 images superposées.

Bonjour,

J'ai 4 groupes de 2 images superposées. Je souhaite déclencher un son en cliquant sur l'image supérieure (olaf.gif)

Je ne sais pas comment gérer les 2 onClick dans les mêmes lignes.

Merci de votre aide.

Cordialement.

 <td align="center" valign="middle"><img src="Images/olaf.gif" width="100" height="75" alt="" onClick="this.src='Images/5.png';" onMouseOut="this.src='Images/5.png' /></td>
      <td width="19%" align="center" valign="middle"></td>
        <td align="center" valign="middle"><img src="Images/olaf.gif" width="100" height="75" alt="" onClick="this.src='Images/non.png';" onMouseOut="this.src='Images/non.png' /></td>
      <td width="19%" align="center" valign="middle"></td>
        <td align="center" valign="middle"><img src="Images/olaf.gif" width="100" height="75" alt="" onClick="this.src='Images/DIABLE.gif';" onMouseOut="this.src='Images/oui.gif' /></td>
      <td width="19%" align="center" valign="middle"></td>
        <td align="center" valign="middle"><img src="Images/olaf.gif" width="100" height="75" alt="" onClick="this.src='Images/oui.gif';" onMouseOut="this.src='Images/oui.gif' /></td>
      <td width="19%" align="center" valign="middle"></td>[code=html]
[/code]
Modifié par Lelouc (02 Apr 2021 - 22:35)
Est-ce que tu pourrais reformuler?
C'est à dire gérer les onclick sur la même ligne?
Bonjour
Je souhaite rajouter un onclick pour déclencher un son lorsque l'on clique sur l'image supérieure, mais je ne sais pas ou il faut l'inclure dans la ligne :
 <td align="center" valign="middle"><img src="Images/olaf.gif" width="100" height="75" alt="" onClick="this.src='Images/5.png';" onMouseOut="this.src='Images/5.png' /></td>
Les </td> <td sont générés automatiquement par Dreamweaver.

Modifié par Lelouc (03 Apr 2021 - 17:18)
Bonsoir,
Si je rajoute onclick j'ai bien le son sur l'image souhaitée mais je perd tous les autres critères.

<script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
</script>
		  
        <td align="center" valign="middle"><img src="Images/olaf.gif" value="PLAY"  onclick="play()">
<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>

Modifié par Lelouc (03 Apr 2021 - 21:33)
c'est mieux comme ça?


<script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
  }
</script>
		  
 <td align="center" valign="middle"><img src="Images/olaf.gif" value="PLAY"  onclick="play()">
     <audio id="audio" src="Sound/TOON.wav" width="100" height="75" alt="" onClick="this.src='Images/5.png';" onMouseOut="this.src='Images/5.png'"></audio>
</td>
Bonjour,
Désolé mais j'ai toujours les mêmes problèmes. L'Olaf suivant à perdu le critère : onClick="this.src='Images/non.png'; onMouseOut="this.src='Images/non.png' >

Les images se trouvent dans les cellules d'un tableau, je suppose que c'est l'origine des <td>
Sujet clos
Aller à