- ベストアンサー
1つの画像クリックで切替の方法
ホームページでボタンをクリックしたときにそのボタンの画像が切り替わり（色変えなど）、同時に違う場所に任意の画像を表示させるということはできるのでしょうか？ どちらか1つならできるのですが、「同時に」できるのかどうかがわかりません。 もしできたとしたら、スクリプトを教えてください。
- shizuku
- お礼率86% (353/409)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。さきほどのスクリプトでも ame.gifからawa.gifに変化しても、ボタンはいきたままです。 ただし、awa.gifからawa.gifに変化（してないですね）しているから、 動きがないのですね。 いかのように変数flagを設けて、trueかfalse、判定すれば、クリックするたびに切り替わります。 ame.gifとawa.gifのまわりにグレー枠ができてしまうのは、ボタンとして使いたいということだったので、<button>タグを使っていたためです。 <button OnClick="b_click()"> <img src="ame.gif" id="img1"> </button> ↓ <img src="ame.gif" id="img1" OnClick="b_click()"> にすれば枠は消えますよ。完成したソースを以下に示します。 -------------------------------------------------------------------- <html> <head> <style type='text/css'> body{color:#FF0000;background-color:#000000} </style> <script language="javascript"> <!-- var flag=true; function b_click(){ if(flag){ document.all.img1.src="awa.gif"; document.all.img2.src="ayaturi.gif"; flag=false; } else{ document.all.img1.src="ame.gif"; document.all.img2.src="angel.gif"; flag=true; } } //--> </script> </head> <body> <img src="ame.gif" id="img1" OnClick="b_click()"> <img src="angel.gif" id="img2" OnClick="b_click()"> </body> </html>
その他の回答 (2)
- mam_00
- ベストアンサー率50% (5/10)
こんばんは。ryota2のおっしゃることそのままですが、例を以下に示します。以下の例ではame.gifのボタンをクリックすると、画像がawa.gifに変化し、かつ、angel.gifの画像がayaturi.gifの画像になります。ただし以下のサンプルは、IEでなければ動きませんのでよろしくお願いします。 <html> <head> <style type='text/css'> body{color:#FF0000;background-color:#000000} </style> <script language="javascript"> <!-- function b_click(){ document.all.img1.src="awa.gif"; document.all.img2.src="ayaturi.gif"; } //--> </script> </head> <body> <button OnClick="b_click()"> <img src="ame.gif" id="img1"> </button> <img src="angel.gif" id="img2"> </body> </html>
お礼
ありがとうございます。 やってみて、ほとんど希望どおりに切り替わったのですが、いくつかご質問があります。ぜひ教えてください。 ●ame.gifとawa.gifのまわりにグレー枠ができてしまうのですが、とる方法はありますか？ ●質問の仕方が悪かったのですが、一度ame.gifをクリックするとawa.gifになり、その後はもうクリックできなくなってしまうのですが、マウスオンの状態だけで切り替わるほうに変更するにはどうしたらよいのでしょうか。
- ryota2
- ベストアンサー率43% (61/140)
function myChange(){ //ボタンの画像が切り替わりのスクリプト //違う場所に任意の画像を表示のスクリプト } とすれば同時に実行する事が出来ます。
お礼
ありがとうございました。 mam_00さんのスクリプトでやってみます。
お礼
希望通りです。ソースをありがとうございました。 とても助かりました！