0

我只是在学习 JS，以便我可以拥有具有翻转状态和音效的按钮。我做得很好，直到我厌倦了添加额外的按钮，这导致我失去了翻转状态。

你可以在这里看到我的一个按钮的例子：http ://www.ultralaboratories.com/sound1.html

这里有两个按钮：http ://www.ultralaboratories.com/sound2.html

为简单起见，我使用了完全相同的按钮两次，但完成后会有 5 个独特的按钮。

有什么想法吗？谢谢！

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
title>Untitled Document</title>
   <audio id="audio_element" src="sound.mp3"></audio>
<script>
    var audio = document.getElementById("audio_element");
    audio.volume = 0;
    audio.play();

    function playAudio() {

        audio.currentTime = 0.01;
        audio.volume = 1;
        audio.play();

    }
</script>

<SCRIPT LANGUAGE="JavaScript">
  <!-- hide from non JavaScript Browsers

  Rollimage = new Array()

  Rollimage[0]= new Image(156,311)
 Rollimage[0].src = "/Images/Banner/e.up.jpg"

  Rollimage[1] = new Image(156,311)
  Rollimage[1].src = "/Images/Banner/e.over.jpg"

  function SwapOut(){
    document.element.src = Rollimage[1].src;
   return true;
  }

  function SwapBack(){
  document.element.src = Rollimage[0].src; 
    return true;
 }

// - stop hiding          --> 
</SCRIPT>

</head>

<body>
<div onmouseover="playAudio()">
<P align="center"> 
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()">     <IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> </A> 
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut()" onmouseout="SwapBack()">     <IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0> </A>

</P>
</div>
4

4 回答 4

2

您在文档中结合了 HTML5 和 HTML3.2……这真的很糟糕。

首先，从旧浏览器中隐藏 JavaScript 表明您仍然生活在 90 年代。它不再需要了。

其次，当你问 JavaScript 时document.element，你指的是哪一个？如果只有一个，那没关系，因为它可以猜测。有两个或更多，它不能。要知道悬停在哪个图像上，请将其this作为参数传递给SwapOutand SwapBack（即。onmouseover="SwapOut(this)"）。然后接受该论点并从中获取图像。在这种情况下，elm.children[0]可以正常工作（假设您将参数命名为elm）。结果函数：

function SwapOut(elm) {elm.children[0].src = Rollimage[1].src;}
function SwapBack(elm) {elm.children[0].src = Rollimage[0].src;}

（您甚至可以将这两个函数合二为一，并将1or0作为第二个参数）

然后是关于一般布局的一些事情：当它是一个身体元素时，你在头部有音频元素。您无缘无故地以零音量播放声音。您可以将 移到getElementById函数中以避免不必要的全局变量。

<!DOCTYPE html>最后，如果您想使用 HTML5 元素，则必须使用 HTML5 文档类型（即）。

于 2012-04-24T22:42:18.840 回答
0

对于图像部分，一种更现代的处理方式是改用 CSS。你以前听说过 CSS 精灵吗？他们太棒了！他们需要一点图像制作，但这是值得的。您可以将多个按钮（或按钮背景、箭头、图形标题等）放入一个大精灵中，这样可以减少 HTTP 请求。

<!-- HTML -->
<a href="#" class="btn" id="someBtn">button</a>
<a href="#" class="btn" id="someOtherBtn">button</a>

下面的示例假设您的图像有两个按钮状态堆叠在一起（常规和悬停）。在悬停/焦点和ouila上重新定位背景图像！交互性。您还可以使用通用类定位多个按钮，然后按 ID 调整大小/位置。 

/* CSS */
a.btn {
   background: transparent url(images/some-button-sprite.png) no-repeat;
   display:block;
}
a#someBtn {
   background-position:0 0;
   height:25px;
   width:100px;
}
a#someBtn:hover,
a#someBtn:focus {
   background-position: 0 -26px;
}
于 2012-04-24T22:50:02.773 回答
0

尝试添加

onmouseover="playAudio()"

到每个 img 而不是 div。

<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0 onmouseover="playAudio()" \>

<IMG SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0 onmouseover="playAudio()" \>

不要忘记关闭您的图像标签\>

于 2012-04-24T22:41:39.570 回答
0

将 id 添加到图像中，然后将这些图像 id 传递到您的交换函数中：

<A HREF="http://www.joemaller.com/" onmouseover="SwapOut('image1')" onmouseout="SwapBack('image1')">
    <IMG ID="image1" SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0>
</A> 
<A HREF="http://www.joemaller.com/" onmouseover="SwapOut('image2')" onmouseout="SwapBack('image2')">
    <IMG ID="image2" SRC="/Images/Banner/e.up.jpg" NAME="element" WIDTH=156 HEIGHT=311 BORDER=0>
</A>

function SwapOut( id )
{
    document.getElementById( id ).src = Rollimage[1].src;
    return true;
}

function SwapBack( id )
{
    document.getElementById( id ).src = Rollimage[0].src; 
    return true;
}

​</p>

于 2012-04-24T22:43:38.390 回答