画像クリックで別の画像

解決済

質問者：noname#3887
質問日時：2001/12/19 13:38
回答数：4件

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

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： leaz024
回答日時：2001/12/21 18:14

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>

必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2001/12/22 13:45

No.3

回答者： gakushaneko
回答日時：2001/12/20 14:44

少し面倒かもしれませんが，画像をページに貼り付け，画像そのものにリンクを貼る方法ではまずいですか？

１枚目
<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は終わりのＹ座標です・・・「範囲指定の」ですよ）

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2001/12/21 08:45

No.2

回答者： UKY
回答日時：2001/12/20 12:04

前のやつにちょっと手を加えてみました。

↓

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2001/12/21 08:43

No.1

回答者： UKY
回答日時：2001/12/19 13:57

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

※　ネットスケープだとうまくいかないかもしれません。(^^;

- 0
- 件

通報する

この回答へのお礼

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

HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。

通報する

お礼日時：2001/12/20 08:28

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！