- ベストアンサー
画像クリックにて自分自身を別画像に入れ替えるには？
ホームページを作成中なのですが、メニュー欄をそれぞれ画像にて表示し、画像クリックにて対象ページに飛ぶようにしております。 このたび、選択されたメニューを識別できるように、クリックされた画像を別画像に入れ替えて表示させようとしています。 onMouseOverやonMouseOut時に一時的に画像を入れ替えるロールオーバーのサンプルはよく見かけますが、できればロールオーバー的なものではなく、onClick時に自分自身の画像を入れ替えし、別の画像がクリックされるまで、ずっと入れ替えた画像を表示しておきたいのです。 JavaScript、CSSなど方法は問いません。 なお、テキストエディタにて作成しています。 どなたかよきアドバイスをお願いいたします。 よろしくお願いいたします。
- nihonkai2002
- お礼率93% (104/111)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
参考URLにあります7番が参考になると思います。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Welcome</title> <script type="text/javascript"> <!-- var oldImg=null; function StoreImg(obj, src){ this.obj=obj; this.src=src; return this; } function chImg(el){ if(oldImg != null){//セーブされている if(oldImg!=el){//自分自身でない oldImg.obj.src=oldImg.src;//戻す } } oldImg=new StoreImg(el, el.src);//セーブしておく el.src="img/00.jpg";//クリックした時の画像に変更 } //--> </script> </head> <body> <img src="img/01.jpg" onclick="chImg(this)"><br> <img src="img/02.jpg" onclick="chImg(this)"><br> <img src="img/03.jpg" onclick="chImg(this)"><br> </body> </html>
お礼
ソースまで載せていただき、大変参考になりました。シンプルなコーディングで勉強になりました。どうもありがとうございました！！
お礼
まさにやりたかった動きでした。参考になりました。どうもありがとうございます！！