ホバリング画像で音を出す、ホバリング時に止まる

私は脈打った画像の上にカーソルを置いたときにそれを実装しようとしています（癌のようです）サウンドファイルを再生したいとき、積み重なった画像、サウンドファイルは停止します。ホバリング画像で音を出す、ホバリング時に止まる

私は苦労していますが、イメージを中心にすることは、どうしたらいいですか？現在のコード：cantはそうする方法を理解しているようです。

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

出典

2016-04-26 Haliaka

何をして動作していませんか？ – Rayon

画像をホバリングすると、サウンドは再生されません – Haliaka

再生するキャッシュにロードされていますか？ – Rayon

最初にスクリプトタグを追加する必要がありました。

テキストを一元的に整列させるには、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>

出典

2016-04-26 08:08:10

あなたのJSはOPが提供しているものとどのように異なっていますか？ – Rayon

さて、どうもありがとう、イメージを中心に私を助けてくれますか？ :)）））） – Haliaka

イメージを含むdivに 'text-align：center'を使用する必要がありました –

ホバリング画像で音を出す、ホバリング時に止まる

答えて

関連する問題