ベストアンサー

画像をクリックして同じページに拡大画像を出す

2007/08/19 11:07

小さい画像をクリックすると同じページに拡大画像が表示されるようにしたいのです。小さい画像が７つ程横に並んでいて、クリックするとその下に拡大画像が表示されるページです。フレームは使わないで出来ますか？フレームを使うとテーブルの背景が切れてしまうので使わないで作りたいのですがわかりません。教えてもらえたら嬉しいです。

tamanokosi
お礼率85% (6/7)

HTML
回答数3
ありがとう数5

みんなの回答 （3）
専門家の回答

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

ベストアンサー

gura_
ベストアンサー率44% (749/1683)

2007/08/19 14:36 回答No.2

拡大画像 1.gif - 7.gif があるとして、このようなのはいかがですか↓ <html> <head> <script type="text/javascript">  </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>  </tr> <tr> <td colspan=7> <img src="1.gif" name="LgIMG" border="0" width="400" height="400"> </td> </tr> </body> </html>

質問者

補足 2007/08/20 10:13

ありがとうございます。やってみたら出来ました。私の説明が悪くてまた教えていただきたいのですが、小さい画面と大きい画面はトリミングでプロポーションが変わっているので別画像扱いにしたいです。大きい画面が上にあって、その下に1列に小さい画面が並んでいるレイアウトなのですが、どう変えればよいのでしょうか？何度も申し訳ありません。よろしくお願いします。

その他の回答 (2)

leap_day
ベストアンサー率60% (338/561)

2007/08/19 19:33 回答No.3

こんにちはこんな感じですか？ <script language="javascript"></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で位置調整してください

質問者

お礼 2007/08/20 10:23

どうもありがとうございました。敏速な対応で驚きました。初心者なのでわからない事だらけでとても参考になりました。

keita_2007
ベストアンサー率0% (0/2)

2007/08/19 12:57 回答No.1

>>フレームを使わないで出来ますか？フレームは必要ありません。JavaScriptで実現可能です。また、表示する場所を設定するためにCSSを使用します。・body間に<div>タグを追加します。 <div id="preview"></div> ・CSSをヘッダ間に追加します。 <style type="text/css"></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"></script> tamanokosiさんがJavaScriptやCSSについてどれほどの知識があるのかわからないので、解説は省きますが、わからないようでしたら、補足なりお礼でその旨をお伝え下さい。 *参考URLにて、サンプルを表示しています。