ベストアンサー

画像クリックで別の画像

2001/12/19 13:38

ある画像をクリックすると別の画像に変わって、もう一度クリックすると最初の画像に戻る、みたいな事って出来ますか？スタイルシートやJavaScript使ってでも良いですので、あれば、ぜひ教えてください。

noname#3887

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

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

ベストアンサー

leaz024
ベストアンサー率75% (398/526)

2001/12/21 18:14 回答No.4

Netscape4.x では、IMG の onClick がサポートされていないので、No.1や2の方法では動きません。通常、画像に対する処理を書く場合は、画像をAタグで囲んで、その onClick に処理を書きます。また、初めは表示されない画像は、Imageオブジェクトを作って、予め読み込んでおきます。 <HTML> <HEAD> <SCRIPT language="JavaScript"></SCRIPT> </HEAD> <BODY onLoad="init()"> <A href="javascript:void(0)" onClick="change_img(0)"><IMG name="image0" border="0" src="a_0.gif"></A> <A href="javascript:void(0)" onClick="change_img(1)"><IMG name="image1" border="0" src="b_0.gif"></A> <A href="javascript:void(0)" onClick="change_img(2)"><IMG name="image2" border="0" src="c_0.gif"></A> </BODY> </HTML> 必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。

質問者

お礼 2001/12/22 13:45

ありがとうございます！希望通りのものが出来ました。 IMGのonClickがサポートされてないっていうのも聞いたことがあったので、良かったです。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

gakushaneko
ベストアンサー率68% (2350/3407)

2001/12/20 14:44 回答No.3

少し面倒かもしれませんが，画像をページに貼り付け，画像そのものにリンクを貼る方法ではまずいですか？１枚目 <BODY> <P><A href="２枚目のページ.html" target="_self"><IMG src="最初の画像.jpg"></A></P> </BODY> ２枚目 <BODY> <P><A href="３枚目のページ.html" target="_self"><IMG src="２枚目の画像.jpg"></A></P> </BODY> ３枚目 <BODY> <P><A href="１枚目のページ.html" target="_self"><IMG src="３枚目の画像.jpg"></A></P> </BODY> いかがなものでしょう？これなら，何枚画像があっても大丈夫だと思いますが・・・。蛇足ですが，こんなことも可能です。 <BODY> <P><IMG src="２枚目の画像.jpg" usemap="#２枚目の画像（拡張子無しのファイル名）"></A></P> <MAP name="２枚目の画像（拡張子無しのファイル名）"> <AREA href="最初のページ.html" target="_self" shape="rect" coords="sx1,sy1,ex1,ey1" alt="前の画像"> <AREA href="Ｉｎｄｅｘなどのページ.html" target="_self" shape="rect" coords="sx2,sy2,ex2,ey2" alt="元に戻す"> <AREA href="３枚目のページ.html" target="_self" shape="rect" coords="sx3,sy3,ex3,ey3" alt="次の画像"> <AREA shape="default" nohref> </MAP></BODY> このようにすると，画像のクリックする部分によって，前の画像や次の画像，または，一覧ページなどに戻すことも出来るようになります。（sxは最初のＸ座標,syは最初のＹ座標,exは終わりのＸ座標,eyは終わりのＹ座標です・・・「範囲指定の」ですよ）

質問者

お礼 2001/12/21 08:45

画像はメインに使うものでは無いし、読み込み時間を出来るだけ少なくしたいので、リンクよりはスタイルシートかJavaScriptなどが良いのです。私の説明不足ですみません。でも、ご回答ありがとうございました。

ログインすると、全ての回答が全文表示されます。

UKY
ベストアンサー率50% (604/1207)

2001/12/20 12:04 回答No.2

前のやつにちょっと手を加えてみました。↓ <script language=javascript> var clicked = new Array(); function mouseclick(n) { if (clicked[n]) { window.event.srcElement.src = "最初の画像.gif"; clicked[n] = false; } else { window.event.srcElement.src = "２枚目の画像.gif"; clicked[n] = true; } } </script> <img id="image1" src="最初の画像.gif" onclick="mouseclick(1)"> <img id="image2" src="最初の画像.gif" onclick="mouseclick(2)"> <img id="image3" src="最初の画像.gif" onclick="mouseclick(3)">

質問者

お礼 2001/12/21 08:43

ありがとうございます！助かります。ところで、もし使う2枚の画像がそれぞれ違う、3組のボタン(ボタンに使ってます)を置きたい時も、どうすれば良いのか教えてもらえますか？これ↑を試してみて、それぞれ色だけ変えても良いなぁ、なんて思ったんです。 1個目のボタンは赤系の色、2個目は青系、3個目は黄色系で、押すと色が鮮やかになり、もう一度押すと元の色に戻る、みたいな感じで出来ますか？何度も質問することになってしまい、申し訳ありませんm(_ _)m

ログインすると、全ての回答が全文表示されます。

UKY
ベストアンサー率50% (604/1207)

2001/12/19 13:57 回答No.1

JavaScriptで出来そうです。 ↓こんな感じ。 <script language=javascript> var clicked = false; function mouseclick() { if (clicked) { image1.src = "最初の画像.gif"; clicked = false; } else { image1.src = "２枚目の画像.gif"; clicked = true; } } </script> <img id="image1" src="最初の画像.gif" onclick="mouseclick()"> ※　ネットスケープだとうまくいかないかもしれません。(^^;

質問者

お礼 2001/12/20 08:28

ありがとうございます（^-^）試してみたら、1つだと出来ました！でも同じページに3つそういうものを置きたいのですが（3つとも、使う2枚の画像は同じものです）、3つ書いてみると出来ませんでした。3つでも出来る方法はありますか？ HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。

ログインすると、全ての回答が全文表示されます。