Jump to content

Onclick on 2 images overlay

Recommended Posts

Hi,

I have 2 images overlay. I want to trigger a sound by clicking on the upper image (olaf.gif) 

I have sound on image but I lose all criteria: size olaf.gif, onClick and onMouseOut on 5.png.

Thank you for your help.

Voizins

<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>

 

Link to comment
  • Replies 1
  • Views 680
  • Created
  • Last Reply
On 4/5/2021 at 10:57 PM, voizins said:

Hi,

I have 2 images overlay. I want to trigger a sound by clicking on the upper image (olaf.gif) 

I have sound on image but I lose all criteria: size olaf.gif, onClick and onMouseOut on 5.png.

Thank you for your help.

Voizins


<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>

 

What is your current site url, we can help having a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.