- ベストアンサー
ホームページで自分の絵を載せたい。表を２分割して、右側にサムネイルを、左側に拡大を載せるには？
自分の描いた絵をオームページで載せたいと思っています。ソフトはホームページビルダーを使っています。作り方をアドバイス頂きたいのですが、私が作りたいフォーマットは次のような形です。 ●画面中央に表（テーブル）をつくる ●それを縦に２分割する ●右のスペースには絵のサムネイルを配置 ●左のスペースにはそのサムネイルをクリックした時に拡大した画像が現れるようにしたいのです。よくこういう風にされてるホームページを見かけるのですがやり方が分かりません。サムネイルをクリックしたら、別ウィンドウが立ち上がって拡大画像が見れるという方法もあるのですが、できれば１つの画面の中で処理したいと思っています。その場合、できればフレームでなく、表の中にこのような仕組みを作りたいと思ってます。サムネイルはたくさんあるので、右の枠にはIFRAMEを作ればいいのかな・・・と思っていたのですが、それを左の枠にどうやって反映させればよいのでしょうか。左の枠もIFRAMEを作らないといけないのでしょうか。よろしくお願いします。
- ホームページ作成ソフト
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>それを左の枠にどうやって反映させればよいのでしょうか。 例えば、左セル内にも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"> <!-- 0.gif:初期画像URL --> </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>
その他の回答 (1)
- vista2446
- ベストアンサー率46% (131/279)
縦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>
お礼
大変わかりやすい回答をありがとうございました。こちらのタグをコピーして、なんとかやってみたらちゃんと出来ました！！まさに、こういうのが作りたかったのです。とても参考になりました。ありがとうございました＼(^o^)／
関連するQ&A
- 左側に拡大画面が右側にサムネイル表示のソフト
こんなソフトを探しています。 １）スライドショー作成ができる ２）画面右側のサムネイル画像をクリックすると左側に拡大反映される 逆でも結構です。 ３）拡大画像が開いて行く （又は拡大画像の右側に次のページ移動の矢印が表示されるソフト） 以上２種類のフリーソフトを探しております。 ホームページでそんなソフトを使ってるのを見て、良いな～と思ったので 出来たら使いたいと思いました。 最悪ホームページビルダーを使ってもと考えていますが出来ましたら 上記に該当するソフトをご紹介ください、お願いします。
- ベストアンサー
- ホームページ作成ソフト
- サムネイル画像の拡大
サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ（表！？）の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像（拡大するように設定しているサムネイル画像）の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか？？？ また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html
- ベストアンサー
- HTML
- ホームページビルダーのサムネイル機能について
Windows7でホームページビルダーｖ14を使っています 8枚の.jpg画像をサムネイル機能で クリックすると拡大画像を表示するようにしたのですが このとき拡大画像を別のウィンドウではなしに サムネイルの下に表示することはできないでしょうか よろしくお願いします
- ベストアンサー
- ホームページ作成ソフト
- インターネット上のサムネイルをクリックすると正常に拡大して開けるものと
インターネット上のサムネイルをクリックすると正常に拡大して開けるものとインターネットの枠組みが くずれてしまって絵が出ないで止まってしまうのがあります。解決法を教えて下さい。 ホームページによって出方に差があるようです。
- 締切済み
- その他（インターネット接続・通信）
- 画像をサムネイルにしてホームページにのせたい
デジカメなどではない、自分のＰＣにある画像をサムネイルにしてホームページにつけたいです。 画像がとてもたくさんあるので、サムネイルにひとつずつリンクを張っていくのが大変です。 サムネイルをクリックしたときに、その画像だけが見れればいいです。 ホームページにサムネイルを張ってくれて、しかもサムネイルをクリックすると大きな画像が別枠で表示されるリンクを自動で張ってくれる、そんなソフトを探しています。 あまり無茶でしょうか？ お願いします。
- ベストアンサー
- レンタルサーバ・ASP
- サムネイル画像がクリックしても拡大しない！
画像添付の掲示板に添付された、サムネイル画像をクリックしますと拡大するのが本当ですが、クリックしても拡大しないのはなぜでしょうか？ 恐れ入りますがpcの設定方法など有りましたらアドバイスお願いします。
- 締切済み
- Windows NT・2000
- Internet Explorer 5でサムネイル画像が拡大表示できません
いろんなホームページのサムネイル画像は、たいていクリックすると拡大 表示されますよね。 私のＭＡＣもいままではそうでした。 ところが最近クリックすると、いきなりダウンロードマネージャーが開いて 画像をダウンロードしてしまいます。 私としては、どんな画像か確認してからダウンロードしたいので、とても ストレスに感じてます。 どなたか詳しい方、一刻も早く私の力になってください。 お願いします。
- ベストアンサー
- Mac
- ホームページビルダーでサムネイルがうまくいかない
ホームページビルダー１６で写真をクリックしたら拡大にすることをしたいです。 挿入→画像の効果→サムネイル で写真を選択しました。 ローカルでプレビューしたらうまくいくのですが、サーバーに上げたら写真の場所が空になってます。 写真もサーバーにアップしているのですが、なぜか空です。 どうしたらいいか、ご指導お願いします。
- ベストアンサー
- ホームページ作成ソフト
- 自作のホームページにサムネイルページを作りたいのですが
ソフトはホームページビルダー９を使用しています。 希望としては、小さな写真の一覧のホームページで、写真をクリックするとクリックした写真が拡大表示され、「次へ」ボタンみたいなのを押すと、次の拡大された写真を表示するものを作成したいです。 ホームページビルダーにあるサムネイルやスライドショー、あと一つ一つ拡大した写真を載せたホームページにリンク貼るくらいしか手は無いのでしょうか？ お願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- サムネイルをクリックで拡大する方法
忍者ブログで、画像のサムネイルをクリックで拡大表示する方法が解りません。 グーグルなどで調べてみても、忍者ブログでのケースが出てきません。 初心者なのでできるだけわかりやすく説明して頂けると助かります。 では、どうか宜しくお願いします。
- ベストアンサー
- ブログ
お礼
大変丁寧な回答をありがとうございました！！なんとか出来ました～＼(^o^)／ htmlの詳しいことはよくわからないので、gura_さんが書いてくださったものを全てコピーして、紹介してくださった参考URLを見ながら、ホームページビルダーで思考錯誤したら出来ました！！よかったです。本当にありがとうございましたm(__)m