- ベストアンサー
画像クリックで別の画像
ある画像をクリックすると別の画像に変わって、もう一度クリックすると最初の画像に戻る、みたいな事って出来ますか？スタイルシートやJavaScript使ってでも良いですので、あれば、ぜひ教えてください。
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
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> 必要に応じて、画像数や画像ファイル名、画像サイズは変更して下さい。
その他の回答 (3)
- gakushaneko
- ベストアンサー率68% (2350/3407)
少し面倒かもしれませんが，画像をページに貼り付け，画像そのものにリンクを貼る方法ではまずいですか？ １枚目 <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は終わりのＹ座標です・・・「範囲指定の」ですよ）
お礼
画像はメインに使うものでは無いし、読み込み時間を出来るだけ少なくしたいので、リンクよりはスタイルシートかJavaScriptなどが良いのです。私の説明不足ですみません。でも、ご回答ありがとうございました。
- UKY
- ベストアンサー率50% (604/1207)
前のやつにちょっと手を加えてみました。↓ <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)">
お礼
ありがとうございます！助かります。 ところで、もし使う2枚の画像がそれぞれ違う、3組のボタン(ボタンに使ってます)を置きたい時も、どうすれば良いのか教えてもらえますか？これ↑を試してみて、それぞれ色だけ変えても良いなぁ、なんて思ったんです。 1個目のボタンは赤系の色、2個目は青系、3個目は黄色系で、押すと色が鮮やかになり、もう一度押すと元の色に戻る、みたいな感じで出来ますか？何度も質問することになってしまい、申し訳ありませんm(_ _)m
- UKY
- ベストアンサー率50% (604/1207)
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()"> ※ ネットスケープだとうまくいかないかもしれません。(^^;
お礼
ありがとうございます（^-^）試してみたら、1つだと出来ました！でも同じページに3つそういうものを置きたいのですが（3つとも、使う2枚の画像は同じものです）、3つ書いてみると出来ませんでした。3つでも出来る方法はありますか？ HTMLのカテゴリで書いたけど、JavaScriptの方に移した方が良いでしょうか。。。
関連するQ&A
- 画像クリックにて自分自身を別画像に入れ替えるには？
ホームページを作成中なのですが、メニュー欄をそれぞれ画像にて表示し、画像クリックにて対象ページに飛ぶようにしております。 このたび、選択されたメニューを識別できるように、クリックされた画像を別画像に入れ替えて表示させようとしています。 onMouseOverやonMouseOut時に一時的に画像を入れ替えるロールオーバーのサンプルはよく見かけますが、できればロールオーバー的なものではなく、onClick時に自分自身の画像を入れ替えし、別の画像がクリックされるまで、ずっと入れ替えた画像を表示しておきたいのです。 JavaScript、CSSなど方法は問いません。 なお、テキストエディタにて作成しています。 どなたかよきアドバイスをお願いいたします。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像をクリックして別の画像を表示させたい
現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- クリックして大きな画像を開く方法
画像をクリックすると大きな画像が別窓で開く、 という動きをよく見かけます。 自分のサイトにも取り込みたいのですが、これはJavaScriptで作るのが一般的なのでしょうか？ それとも、別のやり方もあるのでしょうか？ 既存のサイトに取り込むため、スクリプトを使用する場合JavaScript、phpのみ使用可能です。 サンプルコードなどありましたらお教え頂けたらと思います。 よろしくお願いいたします。
- ベストアンサー
- HTML
- クリックで画像表示、さらに画像の一部をクリックで閉じる
今、Javascriptを使用したページを立ち上げようと しており、以下のようなことをしたいと思っています。 (1) あるテキスト（または画像）をクリック (2) 説明用の画像が表示 (3) (2)で出た画像内の×マークをクリックすると、 その画像が消える。 イメージとしては、GOOGLEローカルのように、 マーカーをクリックすると、 説明文（画像）が出てきて、 ×を押すと閉じるといった内容です。 Javascriptのonclickとかをうまく使えば…と思うのですが、 ホントに初心者なので、分からないことだらけです。 すいませんが、教えていただけないでしょうか。
- 締切済み
- JavaScript
- JavaScriptクリックした画像を変えたいです。
JavaScriptで一度画像をクリックすると画像が変わりそのご画像をクリック できないようにするにはどうしたら良いでしょうか？ A画像をクリックするとB画像に代わりB画像はクリック出来ないように なります。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- WEB作成の際、CSSである画像をクリックするとページ内の別の場所にあ
WEB作成の際、CSSである画像をクリックするとページ内の別の場所にある画像が変わるようにするにはどのようにプログラミングすればよいのでしょうか？またjavascriptを使って画像の入れ替わりがゆるやかに変わるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- 画像をクリックして元に戻すには
ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。 アンカーで元のファイル名を記述すればできますが、 特定のファイル名を指定することなく、 <INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();"> のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=）で、どのように記述すればいいのでしょうか。 検索してみたのですが、なかなか見つけられませんのでよろしくお願いします。 次のような例を見つけましたが このTABLEを使わないで直接画像のみで指定したいのですが。 <script language="javascript"> function onPh(img) { myImg.src = img myTable1.style.display = "block" myTable2.style.display = "none" } function offPh() { myTable1.style.display = "none" myTable2.style.display = "block" } </script> －－－－－－－ <TABLE border="3" table id="myTable1" width="50%" height="50%" onclick="offPh()" style="display:none;"> <tr> <td><img id="myImg" width="100%"></td> </tr> </TABLE> <table border="0" id="myTable2" style="display:block;"> <tr> <td><FONT color="#660066"><img src="hit3.jpg" width="80" height="60" onclick="onPh(this.src)"><br>
- ベストアンサー
- HTML
- 画像をクリックしたら別ウインドウを開くようにするには？
検索したり本を探したりしたのですが、どうしても見つけられなかったので 投稿します。 アルバムのコンテンツを作ろうと考えています。 いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、 まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。 自分の理想としてはサムネイルをクリックすると サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が 表示されるようにしたいんです。 そこで色々調べてみたのですが、ボタンや、テキストをクリックすると 別ウインドウが開くというサンプルはあっても、画像をクリックした 場合の設定方法が見つかりません。 どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、 教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- 画像をクリックすると別窓で開いてしまう
FC2のブログを使っているのですが、アップした画像(400x400)をクリックすると、別窓で開いてしまいます。 別窓で開かないようにするには、どうしたら良いですか？ 分かりやすく説明して頂けると嬉しいです…！
- ベストアンサー
- ブログ
- 重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。 かさなった画像にクリックイベントを発生させたいと 苦心しておりますが、うまくいきません。 スタイルシートのz-indexプロパティーで 重なり位置を指定しました。 以下のような記述です。 <!-- 画像1 --> <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV> <!-- 画像2 --> <DIV style="top:117px;left:360px;position:absolute;z-index:2;"><a href="#" OnClick="javascript:ZoomWin('00464.png');"><IMG src="big.gif" width="42" height="41" border="0"></a></DIV> 00464.pngとbig.gifという画像が重なっていて、 それぞれz-indexで指定しています。 big.gifをクリックすると、ZoomWinという関数を 発生させて、新規ウインドウを 立ち上げたいのですが、 リンクすらはれないのです。 z-indexを指定しただけでは、 <a>タグはつかえないのでしょうか？ ほかに代替案があればおしえてください。
- 締切済み
- JavaScript
お礼
ありがとうございます！希望通りのものが出来ました。 IMGのonClickがサポートされてないっていうのも聞いたことがあったので、良かったです。