ページ上の複数のJSボタン（ロールオーバー状態のページ）

私はロールオーバー状態と効果音のボタンを持つことができるようにJSを学習しています。ボタンを追加するのに飽きるまではかなりうまくやっていたので、ロールオーバー状態が失われてしまった。あなたがここに一つのボタンの私の例を見ることができますページ上の複数のJSボタン（ロールオーバー状態のページ）

：http://www.ultralaboratories.com/sound1.html

と2つのボタンをここに：簡単のためにhttp://www.ultralaboratories.com/sound2.html

を、私は二回、まったく同じボタンを使用しますが、時に5つのユニークなボタンがあります私はこれで終わりです。

どのような考えですか？ありがとう！各IMGとないのdivに

onmouseover="playAudio()"

を追加

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

出典

2012-04-24 Capm Petersen

試してみます。

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

いけないあなたは、あなたの文書にHTML5やHTML3.2を組み合わせている自分のイメージタグ\>

出典

2012-04-24 22:41:39 multimediaxp

を閉じることを忘れ...それは本当に悪いです。

まず、古いブラウザからJavaScriptを隠すことは、あなたがまだ90年代に住んでいるという印です。それはもはや必要ではありません。

第2に、document.elementのJavaScriptをリクエストすると、どちらが意味ですか？唯一のものがあれば、それは推測できるので大丈夫です。 2つ以上では、それはできません。どの画像が上にホバーされたかを知るには、SwapOutとSwapBack（すなわち、onmouseover="SwapOut(this)"）の引数として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 2番目のパラメータも持つことができる）

それからちょうどいくつかのこと：あなたがオーディオの要素を持っています頭部、それが身体の要素であるとき。何の理由もなく音量をゼロにして演奏しています。不要なグローバル変数を回避するために、getElementByIdを関数に移動することができます。

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

出典

2012-04-24 22:42:18

偉大な、これはトリックでした！ええ、これまでのコードを一緒に見つけて、HTMLやCSS以外の経験はありませんでしたので、私はあなたの助けに感謝します:-) –

画像に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; 
}

出典

2012-04-24 22:43:38

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

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

以下の例では、画像に2つのボタンの状態が積み重ねられていることを前提としています（通常とホバー）。ホバリング/フォーカスと背景に背景画像の位置を変えてください！相互作用。汎用クラス&で複数のボタンをターゲティングし、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-24 22:50:02

ページ上の複数のJSボタン（ロールオーバー状態のページ）

答えて

関連する問題