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

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>

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

Playing sound on hover images, stop when hovering off them

html

javascript

audio

onhover