1

我有许多 div 覆盖网页背景图像上菜单的不同部分。

在 div 我有一个 href 链接到另一个页面播放点击声音

我使用了一个 CSS 技巧来填充 div，以便光标在 div 上直接改变。请参阅下面的代码

<script language="javascript" type="text/javascript">
  function playSound(soundfile) {
      "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
  }
</script>     

<div id="apWelcome">
   <a href= "#" class="fill-div" onclick="playSound('Sounds/click.ogg');"> </a>
</div>

下面列出了 apWelcome 和填写区域的 CSS：

#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}

a.fill-div {
cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

问题是，在 FF24 中，点击行为很好，但没有声音，Chrome - 一半工作（声音播放） - 视觉上页面跳下，IE 不显示光标或没有功能。

任何人都知道所有三种浏览器的解决方法或完全不同的方法。谢谢你。

4

2 回答 2

1

阅读这篇关于 html（跨浏览器）中声音的文章。不同的浏览器允许不同类型的声音文件。

此外，您不必将您的divas placeHolder 用于a标签，您可以直接从div's调用您的函数onclick（cursor:poiner;您不会注意到任何区别）

看到这个小提琴，一个完整的解决方案：http: //jsfiddle.net/avrahamcool/ybxBq/

于 2013-09-08T09:16:02.887 回答
1

我从头开始重建了整个布局。你可以从这里下载（我会保持链接活动一周）我不知道是否有必要，但是..这对我来说更容易。

  1. 我使用的是imgin BackgroundContainer 而不是 CSS background，这样：如果有人打印页面，他仍然会看到背景。
  2. 我为“站点”使用了固定的height& width，但它的所有内容都以 % 为单位。因此，如果站点的大小发生变化，它应该可以很好地扩展。
  3. 为了在 IE 中进行测试，您必须从服务器（而不是本地文件）运行 HTML - 所以浏览器不会停止脚本
  4. 我已经删除了几乎所有的脚本，所以把它们放回去（一个接一个，每次确保页面在所有浏览器中仍然有效）
  5. 请注意，我已经更改了您的一些类和文件名，因此请相应地检查您的脚本和 CSS（另外，我重新排列了 Image 文件夹）。
  6. 在 IE10、FF、Chrome 上测试
  7. 注意 url(dummy) 作为可点击元素的背景图像。

祝你好运。

于 2013-09-09T09:09:19.517 回答