- ベストアンサー
画像をクリックして同じページに拡大画像を出す
小さい画像をクリックすると同じページに拡大画像が表示されるようにしたいのです。小さい画像が７つ程横に並んでいて、クリックするとその下に拡大画像が表示されるページです。フレームは使わないで出来ますか？フレームを使うとテーブルの背景が切れてしまうので使わないで作りたいのですがわかりません。教えてもらえたら嬉しいです。
- tamanokosi
- お礼率85% (6/7)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
拡大画像 1.gif - 7.gif があるとして、このようなのはいかがですか↓ <html> <head> <script type="text/javascript"> <!-- function change(n) { document.LgIMG.src = n +".gif"; // 大画像 1.gif - 7.gif を用意 } // --> </script> </head> <body background="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b.gif"> <table align="center"> <tr> <td><a href="javaScript:change(1)"><img src="1.gif" border="0" width="40" height="40"></td> <td><a href="javaScript:change(2)"><img src="2.gif" border="0" width="40" height="40"></td> <td><a href="javaScript:change(3)"><img src="3.gif" border="0" width="40" height="40"></td> <td><a href="javaScript:change(4)"><img src="4.gif" border="0" width="40" height="40"></td> <td><a href="javaScript:change(5)"><img src="5.gif" border="0" width="40" height="40"></td> <td><a href="javaScript:change(6)"><img src="6.gif" border="0" width="40" height="40"></td> <td><a href="javaScript:change(7)"><img src="7.gif" border="0" width="40" height="40"></td> <!-- ここの画像 1.gif - 7.gif は、別画像でも可 --> </tr> <tr> <td colspan=7> <img src="1.gif" name="LgIMG" border="0" width="400" height="400"><!-- 最初の大画像 --> </td> </tr> </body> </html>
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは こんな感じですか？ <script language="javascript"><!-- function imgch(url) { document.getElementById("preview").style.display = "block" document.getElementById("preview").innerHTML = "<img src='"+url+"' width='100%' height='100%'>"; } //--></script> <style type="text/css"> #preview { width:300px; height:300px; display:none; } </style> <img src="sample0.gif" onClick="imgch(this.src)"> <img src="sample1.gif" onClick="imgch(this.src)"> <img src="sample2.gif" onClick="imgch(this.src)"> ・・・sample7まで <div id="preview" onClick="this.style.display='none'"></div> このままだと表示・非表示のたびにこれ以下のコンテンツが上がったり下がったりするのでそれがお嫌でしたら preview{ }内に position:absolute; top:***px; left:***px; background-color:***; を追加してtop,leftで位置調整してください
お礼
どうもありがとうございました。敏速な対応で驚きました。初心者なのでわからない事だらけでとても参考になりました。
- keita_2007
- ベストアンサー率0% (0/2)
>>フレームを使わないで出来ますか？ フレームは必要ありません。JavaScriptで実現可能です。また、表示 する場所を設定するためにCSSを使用します。 ・body間に<div>タグを追加します。 <div id="preview"></div> ・CSSをヘッダ間に追加します。 <style type="text/css"><!-- #preview { width:200px; height:200px; position:absolute; top:*px; left:*px; } --></style> ・<img>タグにonClick属性を追加します。 <img src=* width=* height=* onClick="Preview(1)"> <img src=* width=* height=* onClick="Preview(2)"> <img src=* width=* height=* onClick="Preview(3)"> ・JavaScriptをhead間に追加します。 <script type="text/javascript"><!-- function Preview(no) { var p_id = document.getElementById("preview"); switch(no){ case 1: p_id.innerHTML = "<img src='*'>"; break; case 2: p_id.innerHTML = "<img src='*'>"; break; case 3: p_id.innerHTML = "<img src='*'>"; break; default: p_id.innerHTML = "<p>値が不正です。</p>"; break; } --></script> tamanokosiさんがJavaScriptやCSSについてどれほどの知識があるのか わからないので、解説は省きますが、わからないようでしたら、 補足なりお礼でその旨をお伝え下さい。 *参考URLにて、サンプルを表示しています。
お礼
どうもありがとうございました。敏速な対応で驚きました。初心者なのでわからない事だらけでとても参考になりました。
関連するQ&A
- 「画像クリックで拡大します。」をクリックすると「 ！ページでエラーが発生しました。」が表示されます。
あるサイトの「画像クリックで拡大します。」をクリックしたら「 ！ページでエラーが発生しました。」が表示されました。原因を調べる方法（出力されたエラーログなどのパスやその見方など）を教えて下さい。
- ベストアンサー
- その他([技術者向] コンピューター)
- Webページにある画像をクリックすると拡大して表示
よろしくお願いします。 今、DreamWeaverCS4の体験版を使用して、ホームページを作っています。 その中で画像を表示しているのですが、それをクリックすると新しいページが出てきて、その画像を拡大してみせるにはどういった方法があるのでしょうか？ その辺のホームページでよく見られることですが、調べても出てきませんでした。 わかったらご教授お願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像をクリックして拡大、クリックして縮小
お世話になります。 画像を、クリックして、拡大して、もう一度クリックすると縮小、元に戻る、用にしたいのですが、どのようにしたらいいのでしょうか？ ソフトは、DreamweaverCS4を使っています。 参考ページは、 http://www.ntec.co.jp/html/23553/CP182A.html 左上のスキーグローブの画像を左クリックで、拡大、もう一度クリックでもとに戻ります。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- サムネイル画像の拡大
サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ（表！？）の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像（拡大するように設定しているサムネイル画像）の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか？？？ また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html
- ベストアンサー
- HTML
- 画像の拡大とボタンについて
初めまして。 過去ログで該当するものがなかったので、質問させて頂きます。 「拡大画像01」と拡大画像01を縮小した「縮小画像01」をページに 配置し、縮小画像01をクリックすることで、ページ中央に拡大画像01 を表示したいと思っております。画像は全部で20枚以上あります。 さらにボタンをふたつ配置し「NEXT」「PREVIEW」として、クリック するごとに連番の順序通りに拡大画像を表示させたいのですが、こん なことはJava Scriptでできるものなのでしょうか？ 分りづらい質問で申し訳ありません。どなたかご存じの方がいらっしゃ いましたら、ご教授頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- JavaScript
- サムネイルをクリックすると画像が拡大表示されるようにするには？
下記のページの「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
- サムネイルクリックで別ウィンドウに拡大画像表示
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
- ページ横スクロールでjQuery lightBox
横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin （http://leandrovieira.com/projects/jquery/lightbox/） を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。（拡大時の背景のオーバーレイもずれている） これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- 拡大画像のもとのページをしりたい。
画像検索で綺麗な風景画があったので、そのサイトをみてみたかったのですが、そのサイトがブログのようで、どのようにしたらそのブログにもどれるかわかりません。 拡大画像にリンクしているもとのページをしるにはどうすればいいのでしょうか？ よろしくおねがいします。
- 締切済み
- ブログ
補足
ありがとうございます。やってみたら出来ました。私の説明が悪くてまた教えていただきたいのですが、小さい画面と大きい画面はトリミングでプロポーションが変わっているので別画像扱いにしたいです。 大きい画面が上にあって、その下に1列に小さい画面が並んでいるレイアウトなのですが、どう変えればよいのでしょうか？何度も申し訳ありません。よろしくお願いします。