• ベストアンサー
  • すぐに回答を!

onClickで指定した以外の画像も変わってしまう

  • 質問No.7189997
  • 閲覧数149
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 74% (20/27)

Youtubeの動画をボタンを使って切り替えるように設定しています。

==========
Youtube動画表示
==========
ボタン1 ボタン2 ボタン3

という感じで配列しています。
ボタン1~3は、それぞれ同じ画像で表示しています。
btn.png:OFF時
btn_on.png:ON時

Javascriptは下記のように書いています。
================
function change(obj){
var orgimg="img/btn.png";
var newimg="img/btn_on.png";
var imgs=document.getElementsByTagName('img')
for(var i=0;i<imgs.length;i++){
if(imgs[i].className==obj.className){
if(imgs[i]==obj) imgs[i].src=newimg;
else imgs[i].src=orgimg;
}
}
};
================

ボタン部分はそれぞれ下記のようにしています。
================
<a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a>

<a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a>

<a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a>
================

これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが
同ページ上に表示している全く関係ない画像(例えばタイトル画像やバナー等)が
何故かOFF時の画像が拡大された状態のもの(タイトルやバナーで指定してあるサイズ)に切り替わってしまいます。

CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが
普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。

どこかおかしな部分があると思うのですがわからず途方にくれております。
何方か教えて下さい。どうぞ宜しくお願いします。

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 61% (1594/2576)

var imgs=document.getElementsByTagName('img')
で、ドキュメント内の全部の画像を取得して、それに対して処理をしていますが・・・

class指定で画像をグルーピングをしいてそのグループの画像を対象として処理するような内容になっていますが、肝心のclassが設定されていないようなので、結果的にclass指定の無い画像全部が対象となってしまいます。

ボタンが3個なら、その3個に同じクラス設定をしておけば実現可能ではないでしょうか。


全貌がわかりませんが、わざわざ全画像を対象としなくてもそのリンク要素群をくくるdivでもあれば(divでなくても良いですが)、その範囲にある画像だけを対象にするようにすることでクラス設定も必要なくなるかと思われます。
リンクと画像のそれぞれにonclickが設定されていますが、一連の処理なので両方に設定する必要もなさそうにも思えますが・・・?
お礼コメント
watermusic333

お礼率 74% (20/27)

ご指摘ありがとうございます。
確かにclass指定がされていませんでした。
さっそく指定した所、無事ちゃんと動作しました!

onClickをリンクと画像それぞれに指定しているのですが
こちらはひとつにまとめてみた所、動かなくなってしまいました...
うまいまとめ方がわからなかったので、とりあえず別々で指定しています。
もっと勉強しないとですね。

ありがとうございました!
投稿日時:2011/12/15 02:19
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ