Question

我只是学习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>

Answer 1

您正在将HTML5和HTML3.2合并到您的文档中......这真的很糟糕。

首先，隐藏旧浏览器中的JavaScript是一个标志，你仍然生活在90年代。它不再需要了。

其次，当您向JavaScript询问document.element时，您指的是哪一个？如果只有一个，这是可以的，因为它可以猜测。有两个或更多，它不能。要知道哪个图像悬停在上面，请将this作为参数传递给SwapOut和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;}

（您甚至可以将两个功能合并为一个，并将1或0作为第二个参数）

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

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

Answer 2

尝试添加

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()" \>

别忘了关闭图片代码\>

Answer 3

将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;
}

Answer 4

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

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

以下示例假设您的图像有两个按钮状态堆叠在一起（常规和悬停）。在悬停/焦点和ouila上重新定位背景图像！互动。您还可以使用通用类＆amp;然后按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;
}

页面上有多个JS按钮，页面上有翻转状态

4 个答案: