1つの画像クリックで切替の方法

解決済

質問者：shizuku
質問日時：2002/12/03 15:40
回答数：3件

ホームページでボタンをクリックしたときにそのボタンの画像が切り替わり（色変えなど）、同時に違う場所に任意の画像を表示させるということはできるのでしょうか？
どちらか1つならできるのですが、「同時に」できるのかどうかがわかりません。
もしできたとしたら、スクリプトを教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： ryota2
回答日時：2002/12/03 17:50

function myChange(){

　//ボタンの画像が切り替わりのスクリプト
　//違う場所に任意の画像を表示のスクリプト
}

とすれば同時に実行する事が出来ます。

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
mam_00さんのスクリプトでやってみます。

通報する

お礼日時：2002/12/04 09:31

No.2

回答者： mam_00
回答日時：2002/12/04 00:07

こんばんは。

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">

</script>

</head>
<body>

<button OnClick="b_click()">
<img src="ame.gif" id="img1">
</button>

<img src="angel.gif" id="img2">

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
やってみて、ほとんど希望どおりに切り替わったのですが、いくつかご質問があります。ぜひ教えてください。

●ame.gifとawa.gifのまわりにグレー枠ができてしまうのですが、とる方法はありますか？

●質問の仕方が悪かったのですが、一度ame.gifをクリックするとawa.gifになり、その後はもうクリックできなくなってしまうのですが、マウスオンの状態だけで切り替わるほうに変更するにはどうしたらよいのでしょうか。

通報する

お礼日時：2002/12/04 09:30

No.3ベストアンサー

回答者： mam_00
回答日時：2002/12/04 10:01

こんにちは。

さきほどのスクリプトでも
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">

</script>
</head>

<body>
<img src="ame.gif" id="img1" OnClick="b_click()">
<img src="angel.gif" id="img2" OnClick="b_click()">
</body>
</html>