サムネイルクリックで画像をチェンジ！初心者向けの方法とは？
- 初心者の方でも簡単にできる、サムネイル画像をクリックすることで画像を切り替える方法をご紹介します。
- 同じページ内で複数のセクションの画像を別々に切り替えたい場合、コピーペーストではなく、それぞれのセクションに対して適切なコーディングが必要です。
- 解説ページを参考にしながら、画像の切り替えに関するJavaScriptのコードを適切に追加しましょう。同一ページ内で複数のターゲット画像を分けることは可能です。
- ベストアンサー
サムネイルクリックで、画像をチェンジさせたい
初心者です。よろしくお願いします。 いくつか並んだ小さなサムネイル画像をクリックすることで、少し離れた大きめ画像をそれぞれのサムネイル画像の拡大に変えたいです。 下記のページの答えを参考にしてやってみました。http://oshiete1.goo.ne.jp/qa1192554.html その時は上手にできました。 ただ、それが同一ページの中に画像違いで、下にあと２つ必要なのです。 原理は同じかと思い、上手にできたものをコピーペーストしてあとの２つを作りました。 しかし、あとで作った２つの画像群の中、サムネイルをクリックすると画像が切り替わって欲しい所ではなく、別のセクションのほうの画像が切り替わってしまいます。 どうすれば思った場所の画像を切り替えられますでしょうか？ もしくは、同一ページ内で３枚という複数にターゲット画像を分けることはムリなんでしょうか？ 文章が解りづらくて申し訳ございません。
- ursla
- お礼率55% (90/161)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <title></title> <script type="text/javascript"> <!-- function change(imgname, fname){ document.images[imgname].src=fname; } //--> </script> </head> <body> <img name="IMAGE1" src="A1.jpg"><br> <img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" > <img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" > <img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" > <hr> <img name="IMAGE2" src="A2.jpg"><br> <img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" > <img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" > <img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" > <hr> <img name="IMAGE3" src="A3.jpg"><br> <img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" > <img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" > <img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" > <hr> </body> </html> まず、そのURLのサンプルは、変更する指定場所がCHANGEの一箇所である為、 function change(fname) という関数から、場所も指定できるように function change(imgname, fname) というimgnameが設定できるように変更します。 それで、IMAGE1～IMAGE3の場所の画像を変更できるようになります。 場所が指定でき照るので、何箇所にも対応できます。 また、マウスが離れた時に戻る画像も参考URLでは、同じ場所で同じ画像を指定してたので、これも場所と、元に戻る画像を指定できるようにします。 ただそれだと上で作ったchangeと同じなのでrestore()はなくしちゃって、changeを使えばいいことがわかります。 それで、 <img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" > 上記のサムネイル画像の上にマウスが乗ったら、 change('IMAGE1', 'big1.jpg')を実行しろ マウスが離れたらchange('IMAGE1', 'A1.jpg')を実行しろとなり 離れたイメージの画像が置き換わります。 おっと、質問者様の指定ではマウスが乗ったら出はなくてクリックでしたね。 その場合、onmouseoverではなく、onclick="change('IMAGE1', 'big1.jpg')" とすることで、実行できます。 ついでなので、change関数の中身の説明をしますと document.images[imgname].src=fname; となっています。 これは、ドキュメント（ホームページ全体ですね）のイメージの[imgname]変数の中に入ってる名前の画像をfname変数の中に入っているURLに変えなさい。という命令です。
関連するQ&A
- サムネイル画像がクリックしても拡大しない！
画像添付の掲示板に添付された、サムネイル画像をクリックしますと拡大するのが本当ですが、クリックしても拡大しないのはなぜでしょうか？ 恐れ入りますがpcの設定方法など有りましたらアドバイスお願いします。
- 締切済み
- Windows NT・2000
- サムネイルをクリックすると画像が拡大表示されるようにするには？
下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。 インラインフレームは使いたくないのでJavaScriptでできないかと思っています。 ちなみに当方はJavaScript初心者です。 白枠はcssで#subcon2というボックスの背景に設定しています。 画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。 この情報で足りますか？ どのようにすればいいでしょうか？よろしくお願い致します。 http://www.ac.auone-net.jp/~mrs/sample.html
- ベストアンサー
- JavaScript
- サムネイルの画像とリンク先の画像はおなじなのでしょうか？
画像のサムネイルを名前をつけて保存すると93*144で８kバイト そのサムネイルをクリックしてその画像のところにとびその画像を 保存すると683*1024で200kバイトとなります。 サムネイルと飛んだ先の画像の絵は同じです。 93*144を拡大してもぼやけてしまいます これはどういうことでしょうか？ サムネイルとクリックした後の画像はファイル自体がちがうということですか？ このサムネイルの画像を大きい画像にしてぼやけないように することは可能なのでしょうか？（変換、拡大など）（サムネイルからじゃむり？）
- ベストアンサー
- ブログ
- サムネイル画像がうまくいきません
ホームページビルダー６でHPを作成しているのですが サムネイル画像をクリックすると写真は表示されずに gooのHP画面が出てきます。対処法を教えてください 因みに写真のページが３ページあり、１、２ページはちゃんと出来るのですが ３ページ目だけ？？？な状態です 全て同じように作ったはずなのですが・・・ よろしくお願いします。
- ベストアンサー
- HTML
- サムネイルクリックで別ウィンドウに拡大画像表示
javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- サムネイル画像の拡大
サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ（表！？）の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像（拡大するように設定しているサムネイル画像）の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか？？？ また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html
- ベストアンサー
- HTML
- FC2ブログ サムネイル画像
Google・Yahoo等で画像検索をすると、サムネイル表示で検索結果が出ます。 その後サムネイル画像をクリックすると、「FC2 BLOG このページの表示は許可されてません」と表示されます。 拡大画像は表示しない仕組みになっているのでしょうか？ 何か設定があるのかよくわかりません。
- 締切済み
- ブログ
- 画像をサムネイル表示しクリックで拡大
ホームページで、画像をサムネイル表示し、クリックで画像を大きく表示したいです。htmlは多少わかりますが、あと何が必要でしょうか。 参考になる知識やホームページなどありましたら教えてください。 ※以下のページのような画像表示がしたいです。サムネイルをクリックすると、画像が大きく表示され、大きい表示のまま次の画像や前の画像に進んだり戻ったりできるようにしたいです。 http://www.hirokikun.jp/magazine/pg49.html
- ベストアンサー
- HTML
- サムネイル画像をクリックすると拡大画像を表示させる方法
今はまずサーバに同一画像の小さい写真（サムネイル用）と大きい写真の両方をアップロードして、 小さい画像を表示させて、そこにリンクをつけて大きい画像のURLへとばすようにタグを書いているのですが、これでは同じ写真を２枚アップロードしなくてはいけず、面倒です。 1枚の写真だけをアップロードしてサムネイル画像を表示させて、クリックしたら拡大写真がでるようにするためにはどのようなタグを使えばいいのでしょうか？
- ベストアンサー
- HTML
- サムネイルの画像を同ページ内のある固定された同じ場所に拡大画像を出す方法について
私自身ホームページに関する専門用語をほとんど知らないため 正確に私の意志をお伝えすることが出来ないかもしれませんが、どうか、お力添えのほどよろしくお願いします。 下記のURL http://www.alan1.net/jp/hawaii/oahu/sg/106/ag/5641/ にあるように、サムネイルのいずれの画像(小さい)をクリックしても、同ページ内のある固定された同じ場所に拡大した画像(大きい)を出す方法を教えていただけないでしょうか？ 申し訳ございませんがよろしくお願いいたします。
- ベストアンサー
- HTML
お礼
教えていただいたようにやってみたら思った通りにできました！本当にありがとうございました！