OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

画像クリックで別の画像

  • すぐに回答を!
  • 質問No.187604
  • 閲覧数342
  • ありがとう数4
  • 気になる数0
  • 回答数4
  • コメント数0

ある画像をクリックすると別の画像に変わって、もう一度クリックすると最初の画像に戻る、みたいな事って出来ますか?スタイルシートやJavaScript使ってでも良いですので、あれば、ぜひ教えてください。
通報する
  • 回答数4
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.4
レベル12

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

Netscape4.x では、IMG の onClick がサポートされていないので、No.1や2の方法では動きません。
通常、画像に対する処理を書く場合は、画像をAタグで囲んで、その onClick に処理を書きます。
また、初めは表示されない画像は、Imageオブジェクトを作って、予め読み込んでおきます。

<HTML>
<HEAD>
<SCRIPT language="JavaScript"><!--
var count = 3;       // 画像数
var files = new Array("a_1.gif", "b_1.gif", "c_1.gif");  // 画像ファイル名
var objs = new Array(count);

function init() {    // 初期化(イメージのプリロードなど)
  for (i = 0; i < objs.length; i++) {
    objs[i] = new Image(32,32);   // 画像サイズ
    objs[i].src = files[i];
    objs[i].bak = document.images["image"+i].src;
    objs[i].flg = 0;
  }
}

function change_img(n) {  // 画像変更
  if (objs[n].flg == 0) {
    document.images["image"+n].src = objs[n].src;
  } else {
    document.images["image"+n].src = objs[n].bak;
  }
  objs[n].flg = 1 - objs[n].flg;
}
//--></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>

必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。
お礼コメント
noname#3887

ありがとうございます!希望通りのものが出来ました。
IMGのonClickがサポートされてないっていうのも聞いたことがあったので、良かったです。
投稿日時 - 2001-12-22 13:45:12
-PR-
-PR-

その他の回答 (全3件)

  • 回答No.1
レベル13

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

JavaScriptで出来そうです。 ↓こんな感じ。 <script language=javascript> var clicked = false; function mouseclick() { if (clicked) { image1.src = "最初の画像.gif"; clicked = false; } else { image1. ...続きを読む
JavaScriptで出来そうです。

↓こんな感じ。

<script language=javascript>
var clicked = false;
function mouseclick() {
if (clicked) {
image1.src = "最初の画像.gif";
clicked = false;
} else {
image1.src = "2枚目の画像.gif";
clicked = true;
}
}
</script>
<img id="image1" src="最初の画像.gif" onclick="mouseclick()">

※ ネットスケープだとうまくいかないかもしれません。(^^;
お礼コメント
noname#3887

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

HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。
投稿日時 - 2001-12-20 08:28:38


  • 回答No.2
レベル13

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

前のやつにちょっと手を加えてみました。↓ <script language=javascript> var clicked = new Array(); function mouseclick(n) { if (clicked[n]) { window.event.srcElement.src = "最初の画像.gif"; clicked[n] = fals ...続きを読む
前のやつにちょっと手を加えてみました。↓

<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 = "2枚目の画像.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)">
お礼コメント
noname#3887

ありがとうございます!助かります。
ところで、もし使う2枚の画像がそれぞれ違う、3組のボタン(ボタンに使ってます)を置きたい時も、どうすれば良いのか教えてもらえますか?これ↑を試してみて、それぞれ色だけ変えても良いなぁ、なんて思ったんです。
1個目のボタンは赤系の色、2個目は青系、3個目は黄色系で、押すと色が鮮やかになり、もう一度押すと元の色に戻る、みたいな感じで出来ますか?何度も質問することになってしまい、申し訳ありませんm(_ _)m
投稿日時 - 2001-12-21 08:43:03
  • 回答No.3
レベル14

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

少し面倒かもしれませんが,画像をページに貼り付け,画像そのものにリンクを貼る方法ではまずいですか? 1枚目 <BODY> <P><A href="2枚目のページ.html" target="_self"><IMG src="最初の画像.jpg"></A></P> ...続きを読む
少し面倒かもしれませんが,画像をページに貼り付け,画像そのものにリンクを貼る方法ではまずいですか?

1枚目
<BODY>
<P><A href="2枚目のページ.html" target="_self"><IMG src="最初の画像.jpg"></A></P>
</BODY>
2枚目
<BODY>
<P><A href="3枚目のページ.html" target="_self"><IMG src="2枚目の画像.jpg"></A></P>
</BODY>
3枚目
<BODY>
<P><A href="1枚目のページ.html" target="_self"><IMG src="3枚目の画像.jpg"></A></P>
</BODY>

いかがなものでしょう?
これなら,何枚画像があっても大丈夫だと思いますが・・・。

蛇足ですが,こんなことも可能です。
<BODY>
<P><IMG src="2枚目の画像.jpg" usemap="#2枚目の画像(拡張子無しのファイル名)"></A></P>
<MAP name="2枚目の画像(拡張子無しのファイル名)">
<AREA href="最初のページ.html" target="_self" shape="rect" coords="sx1,sy1,ex1,ey1" alt="前の画像">
<AREA href="Indexなどのページ.html" target="_self" shape="rect" coords="sx2,sy2,ex2,ey2" alt="元に戻す">
<AREA href="3枚目のページ.html" target="_self" shape="rect" coords="sx3,sy3,ex3,ey3" alt="次の画像">
<AREA shape="default" nohref>
</MAP></BODY>
このようにすると,画像のクリックする部分によって,前の画像や次の画像,または,一覧ページなどに戻すことも出来るようになります。
(sxは最初のX座標,syは最初のY座標,exは終わりのX座標,eyは終わりのY座標です・・・「範囲指定の」ですよ)
お礼コメント
noname#3887

画像はメインに使うものでは無いし、読み込み時間を出来るだけ少なくしたいので、リンクよりはスタイルシートかJavaScriptなどが良いのです。私の説明不足ですみません。でも、ご回答ありがとうございました。
投稿日時 - 2001-12-21 08:45:48
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ