0

ロールオーバー状態と効果音を備えたボタンを使用できるように、JSを学んでいます。ボタンを追加するのに疲れるまではかなりうまくいっていたので、ロールオーバー状態が失われました。

ここで 1 つのボタンの例を見ることができます: http://www.ultralaboratories.com/sound1.html

ここに 2 つのボタンがあります: http://www.ultralaboratories.com/sound2.html

簡単にするために、まったく同じボタンを 2 回使用しましたが、完了すると 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、どちらを意味しますか? 1つしかない場合は、推測できるので大丈夫です。2つ以上ではできません。どの画像がホバーされたかを知るには、 andthisに引数として渡します(つまり)。次に、その引数を取り、そこから画像を取得します。この場合、は問題なく動作します (パラメータに という名前を付けたと仮定します)。結果の関数:SwapOutSwapBackonmouseover="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 つに結合して、1or0を 2 番目のパラメーターにすることもできます)

次に、一般的なレイアウトについていくつか説明します。 body 要素の場合、audio 要素は head にあります。まったく理由もなく、音量ゼロでサウンドを再生しています。を関数に移動しgetElementByIdて、不要なグローバル変数を避けることができます。

<!DOCTYPE html>最後に、 HTML5 要素を使用する場合は、HTML5 doctype (つまり ) を使用する必要があります。

于 2012-04-24T22:42:18.840 に答える
0

画像部分の場合、それを処理するためのより現代的な方法は、代わりにCSSを使用することです。CSSスプライトについて聞いたことがありますか？彼らはとても素晴らしいです！少し画像を作成する必要がありますが、それだけの価値はあります。複数のボタン（またはボタンの背景、矢印、グラフィックの見出しなど）を1つの大きなスプライトに配置すると、HTTPリクエストを大幅に削減できます。

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

以下の例では、画像に2つのボタン状態（通常とホバー）が積み重ねられていると想定しています。ホバー/フォーカスと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()"

divではなく各imgに。

<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 に答える