在悬停图像上播放声音，在悬停图像时停止

Question

我正在尝试实现它，所以当我将鼠标悬停在脉动图像上方时（我知道它看起来很癌），我希望它播放声音文件，当我从堆叠的图像中移除鼠标时，声音文件停止。

我正在努力解决的另一件事是将图像居中，无论如何它们似乎都将自己定位在角落里，我该如何解决这个问题？ 当前代码：似乎无法理解如何执行此操作。

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

Answer 1

您需要先添加脚本标签。

要居中对齐文本，您需要使用text-align:center。另外，您应该阅读position:absolute，因为这意味着p 标签隐藏在图像后面。

当您将鼠标悬停在将播放声音的图像上时，以下内容将起作用。

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