ベストアンサー

ホームページで自分の絵を載せたい。表を２分割して、右側にサムネイルを、左側に拡大を載せるには？

2007/01/08 05:15

自分の描いた絵をオームページで載せたいと思っています。ソフトはホームページビルダーを使っています。作り方をアドバイス頂きたいのですが、私が作りたいフォーマットは次のような形です。 ●画面中央に表（テーブル）をつくる ●それを縦に２分割する ●右のスペースには絵のサムネイルを配置 ●左のスペースにはそのサムネイルをクリックした時に拡大した画像が現れるようにしたいのです。よくこういう風にされてるホームページを見かけるのですがやり方が分かりません。サムネイルをクリックしたら、別ウィンドウが立ち上がって拡大画像が見れるという方法もあるのですが、できれば１つの画面の中で処理したいと思っています。その場合、できればフレームでなく、表の中にこのような仕組みを作りたいと思ってます。サムネイルはたくさんあるので、右の枠にはIFRAMEを作ればいいのかな・・・と思っていたのですが、それを左の枠にどうやって反映させればよいのでしょうか。左の枠もIFRAMEを作らないといけないのでしょうか。よろしくお願いします。

noname#118794

ホームページ作成ソフト
回答数2
ありがとう数5

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

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

ベストアンサー

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

2007/01/08 10:06 回答No.1

>それを左の枠にどうやって反映させればよいのでしょうか。　例えば、左セル内にもIFRAMEをつくり、名前を付ければよいでしょう。↓ http://www.tagindex.com/html_tag/frame/i_name.html 手順↓ １　右セル内のサムネールページ【migi.html】を作る。方法↓ http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0957 ２　左セル内の表示ページ【hidari.html】を作る。例↓ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>左初期画像</title> </head> <body> <img src="0.gif">  </body> </html> ３　全体のページを作る【main.html】を作る。例↓ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>全体ページ</title> </head> <body> <table width=600 align=center> <tr> <td> <iframe src="hidari.html" name="hidari"> ここに拡大画像を表示 </iframe> </td> <td> <iframe src="migi.html" name="migi"> ここにサムネイルを表示 </iframe> </td> </tr> </table> </body> </html>

参考URL：: http://www.tagindex.com/html_tag/frame/i_name.html,http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0957

質問者

お礼 2007/01/09 01:31

大変丁寧な回答をありがとうございました！！なんとか出来ました～＼(^o^)／　htmlの詳しいことはよくわからないので、gura_さんが書いてくださったものを全てコピーして、紹介してくださった参考URLを見ながら、ホームページビルダーで思考錯誤したら出来ました！！よかったです。本当にありがとうございましたm(__)m

その他の回答 (1)

vista2446
ベストアンサー率46% (131/279)

2007/01/08 11:30 回答No.2

縦2分割で左セルにインラインフレーム、右セルにサムネイルテーブルをネストして更新しやすくしています。サムネイル用の画像(s-a.jpgなど）を作った方が仕上がりが良いだろうと思います。インラインフレームに名前を付けること、サムネイル画像のaタグのtarget属性でフレームの名前を指定することを忘れないでください。 <div align="center"> <table border="0" cellpadding="10" cellspacing="10"> <tr> <td align="center" valign="middle"> <iframe src="g.jpg" name="gazou" width="350" height="500" scrolling="no" frameborder="0"> このページはインラインフレームを使用しています。<br>未対応ブラウザをご利用の方はご覧になれません。 </iframe> </td> <td> <table border="0" cellpadding="5"> <tr> <td><a href="a.jpg" target="gazou"><img src="s-a.jpg" width="130" height="180"></a></td> <td><a href="b.jpg" target="gazou"><img src="s-b.jpg" width="130" height="180"></a></td> <td><a href="c.jpg" target="gazou"><img src="s-c.jpg" width="130" height="180"></a></td> </tr> <tr> <td><a href="d.jpg" target="gazou"><img src="s-d.jpg" width="130" height="180"></a></td> <td><a href="e.jpg" target="gazou"><img src="s-e.jpg" width="130" height="180"></a></td> <td><a href="f.jpg" target="gazou"><img src="s-f.jpg" width="130" height="180"></a></td> </tr> </table> </td> </tr> </table> </div>

質問者