ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 ThickBoxでhtmlページをポップアップ表示

準備は済んでいますか?

ThickBoxを使う準備が出来ていない場合は以下のページを参考に準備を行って下さい。

 ThiciBoxを使う準備
 http://www.aimix.jp/thickboxpre.html



ポップアップのサンプル

下のポップアップのサンプルの文字をクリックすると、http://www.aimix.jp/thickboxtst.html
HTMLファイルをインラインフレームでポップアップ表示します。

>> ポップアップのサンプル

※ 暗い部分をクリックすると元に戻ります。





  リンク設定の変更

htmlページへのリンクを設置します。

リンクはテキストでも画像でも良く http:// から始まるURLでも結構です。
ポップアップする枠は幅や高さが調節できますが、インラインフレームで表示しますので、
表示するhtmlページが大きいとスクロールバーが表示されます。

※ リンク方法については省略させて頂きます。



次に対象のリンクを右クリックし 「リンクの設定」 を選択します。





下の赤枠のようにファイル名が表示されている部分がありますので、
ファイル名の後に以下の一行を追加します。


「URLへ」画面で追加する場合も同じく末尾に上の一行を追加します。
上記の一行が追加されていれば良いので、どちらで追加しても構いません。







追加後は以下の赤枠のような状態になります。
width=300 の 300 はポップアップ枠のを示し、height=200 の 200 は高さを示します。
これらの値は好みに合わせて修正を行って下さい。






続けてスタイルをクリックします。






「定義済みクラスの指定」 に thickbox と入力してOKボタンを押します。









  動作確認

以上の操作でリンク先のリンク先のページがポップアップ表示されるようになりました。
「プレビュー」 からリンクをクリックして確認してみましょう。






  注意事項

thickbox.css を適用すると全体へ適用されるマージンとパディングが0になります。
thickbox.css を編集して値を変更するか、思った表示にならない場合は当該部分の属性から
マージンとパディングを修正する必要があります。

例えば リストを挿入した際に先頭の ・ が無くなってしまう等です。
この場合は <UL> にマージンとパディングを 10 と設定してやる事で回避できます。










| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved