0

私はJavaScriptを初めて使用します。画像をクリックするのは初めてですが、その画像はSRCなども変更します。

これはコードです：

<a href="#pduno"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pduno.png" width="13" height="11" /></a> 
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a>
<a href="#pddos"><img onclick="this.src='img/pduno.png';document.getElementsByClassName('imgdp').src='img/pddos.png'" class="imgdp" src="img/pddos.png" width="13" height="11" /></a>

pduno.pngは「アクティブ」な画像で、pddos.pngは「非アクティブな」画像です。

画像を見てみましょう私は3つの画像を持っていますpduno--pddos--pddos

2つのpddoの1つをクリックすると、pdunoに変わり、pdunoだったものがpddoに変わります。つまり、pdunoを含む画像は1つだけで、残りはpddosです。

これを使ってスクロールギャラリーを作成しています。pdunoは、どのギャラリーが表示されているかを表示するように機能します。

4

2 に答える 2

2

そのためにjQueryライブラリを使用します（それほど単純ではない関数を使用する必要があるため）

このコードを記述して含めることができます (何もダウンロードする必要はありません)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />

そして、私はこれをします：

<a href="#pddos"><img class="pdimg" src="img/pduno.png" width="13" height="11" /></a>
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a>
<a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a>

HTML では、すべてのスクリプトを削除して、次の場所に移動しました。

<script>
$('.pdimg').click(function(){ //This registers the function with the click event
    $('.pdimg').attr('src', 'img/pddos.png'); //This resets the image to pddos
    $(this).attr('src', 'img/pddos.png'); //This sets the image to uno, 
                             // "this" will be the img that you clicked on.
}
</script>
于 2012-04-16T01:11:53.780 に答える
1

document.getElementsByClassName単一の要素ではなく、ドキュメントからノードリストを選択します。選択した各要素の src 属性を変更するには、リストをループする必要があります。

また、すべてのイメージを pddos にリセットしてから 1 つをアクティブにするために、1 つを pduno に設定してからすべてをリセットすることはできません。

于 2012-04-16T01:00:40.350 に答える