CODEWITHSUNDEEP
javascripthtmlonhoveraudio
Haliaka
Haliaka

Reputation: 15

Playing sound on hover images, stop when hovering off them

I am trying to implement it so when I hover above the pulsing image(I know it looks cancerous) I want it to play a soundfile, and when I remove the mouse from the stacked images, the soundfile stops.

Another thing im struggeling with is to center the images, they seem to position themselvs in a corner no matter what, how may I fix this? current code: cant seem to understand how to do so.

<html>
    <head>
        <title> fagdag 26.04.2016 helårs </title>
            <style>
            #banner {
            vertical-align: middle  
            }
            .pulsate {
            -webkit-animation: pulsate 3s ease-out;
            -webkit-animation-iteration-count: infinite; 
            opacity: 0.5;
            }
            @-webkit-keyframes pulsate {
                    0% { 
                    opacity: 0.5;
                }
                    50% { 
                    opacity: 1.0;
                }
                    100% { 
                    opacity: 0.5;
                }
            }



            </style>
    </head>

    <body>
    <div id="banner">
    <img src="http://i.imgur.com/SrnpgpD.jpg" style="z-index: 0; position: absolute" align="middle"">
    <img class="pulsate" src="http://i.imgur.com/t2Pil1a.png" style="z-index: 1; position: absolute" align="middle""">
    </div>
    <p onmouseover="PlaySound('mySound')" 
    onmouseout="StopSound('mySound')">Hover Over Me To Play</p>
<br><br>
<audio id='mySound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg'/>

    function PlaySound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.play();
}

function StopSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.pause();
    thissound.currentTime = 0;
}

    </body>
</html>

Upvotes: 0

Views: 1959

Answers (1)

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

You needed to add script tags to begin with.

To align text centrally you need to use text-align:center. Also, you should read up on position:absolute as this meant the p tag was hidden behind the image.

The below works when you hover over the image the sound will play.

<html>
<head>
  <title>fagdag 26.04.2016 helårs</title>
</head>

<body>
  <div style="text-align:center;" id="banner">
    <img src="http://i.imgur.com/SrnpgpD.jpg" style="z-index: 0;>
    <img src="http://i.imgur.com/t2Pil1a.png" style="z-index: 1; position: relative; text-align:center" class="pulsate">
  </div>
  <p onmouseover="PlaySound( 'mySound') " onmouseout="StopSound( 'mySound') ">Hover Over Me To Play</p>
  <audio id='mySound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg' />

    <script type="text/javascript ">
      function PlaySound(soundobj) {
        var thissound = document.getElementById(soundobj);
        thissound.play();
      }

      function StopSound(soundobj) {
        var thissound = document.getElementById(soundobj);
        thissound.pause();
        thissound.currentTime = 0;
      }
    </script>
</body>
</html>

Upvotes: 1

Related Questions