0

私は何か間違ったことをしなければならないことを知っていますが、私は自分が何をしているのかを完全には理解していません. JavaScript 関数にリンクされた複数のボタンを使用して処理を行うフォームを作成しています。私は、これら 2 つのボタンを同じページに配置するという非常に基本的なポイントにいます。onMouseOver、onMouseDown、onMouseUp、onMouseOut を実行すると、ボタンのイメージが変わります。

これを行うには他の方法 (より良い方法) があることは知っていますが、少なくとも JavaScript の仕組みをよりよく理解するために、この方向に進んでいます。今後、このようなことが必要になるかもしれないやや複雑なことを行う必要があることはわかっています。そこに着いたら、それを確実に理解したいと思います。

私が抱えている問題は、2 番目のボタンを使用しようとしても何も起こらないことです。最初のボタンは正常に機能しますが、2 番目のボタンは機能しません。また、2 番目のボタンを使用しようとすると、最初のボタンがオフになります。したがって、ボタン 2 を onMouseOver すると、ボタン 1 に影響が現れます。同じ画像を使用しないように画像ファイルを新しいセットにコピーしようとしましたが、ボタン 2 を使用すると、ボタン 2 に設定された機能がボタン 1 に適用されることがわかりました。

とにかく、ここにHTMLコードがあります....

<input type="hidden"  value="0" id="theValue"  /> 
<p><a  href="javascript:addElement()"  ><img id="button" onMouseOver="hover_over()"
onMouseOut="hover_off()"  onMouseDown="click_add()" onMouseUp="release()"   
src="images/add_default.png" name="add" width="43" height="21"></a></p>


<input type="hidden"  value="0" id="theValue2"  /> 
<p><a href="javascript:addProduct()"  ><img id="button2"  
onMouseOver="hover_over_second()" onMouseOut="hover_off_second()" 
onMouseDown="click_add_second()" onMouseUp="release_second()"  
src="images/add_default2.png" name="add2" width="43" height="21"></a></p>

そして、ここにJavaScriptがあります....

////
//----------------Button Animation 1-------------------
////

function hover_off() {
document.images.add.src='images/add_default.png';   
}

function hover_over() {
document.images.add.src='images/add_hover.png';
}

function click_add() {
document.images.add.src='images/add_click.png';
}

function release() {
document.images.add.src='images/add_hover.png';
}
////
//---------------------------------------------------
////

////
//----------------Button Animation 2-------------------
////
function hover_off_second() {
document.images.add.src='images/add_default2.png';

}
function hover_over_second() {
document.images.add.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add.src='images/add_click2.png';
}
function release_second() {
document.images.add.src='images/add_hover2.png';
}
////
//---------------------------------------------------
////

ここで何が間違っていますか？これらのリンクを実際に別々に機能させるにはどうすればよいですか?

賢い方教えてください。私はこれがばかげて単純でなければならないことを知っています。

4

1 に答える 1

0

2 番目のボタン ハンドラーで同じ要素をターゲットにしています。最初の要素のように add2 ではなく add2 にする必要があるため、最初の要素の src 属性が他の要素ではなく変更されます。

function hover_off_second() {
document.images.add2.src='images/add_default2.png';
}
function hover_over_second() {
document.images.add2.src='images/add_hover2.png';
}
function click_add_second() {
document.images.add2.src='images/add_click2.png';
}
function release_second() {
document.images.add2.src='images/add_hover2.png';
}
于 2012-04-24T21:38:44.597 に答える