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

Yahoo!ブックマークに登録

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





 ポップアップ小窓を付けてみる

小さな小窓を表示する方法の説明で、画像を表示したり、説明を表示したりするのに便利です。
小窓を複数設置する場合は「小技集」から小窓を複数設置するなどを参考にして下さい。



 サンプル

下のリンクは小窓で画像表示とページ表示をしますので、それぞれクリックし確認してみて下さい。

小窓1 (画像を表示)

小窓2 (ページを表示)




 設定

HTMLソースにコピーしたり、修正したりしなくてはいけないのでちょっと面倒かもしれませんが、修正する部分を理解すれば簡単にできるようになると思いますのでお試し下さい。



1. ソースのコピー

まずは下のソースをコピーして下さい。
<SCRIPT language="JavaScript">
<!--
function mado1(){
renew = window.open("URL","new","width=100,height=100");
renew.focus();
}
// -->
</SCRIPT>



2. ソースの貼り付け
次に先ほどコピーしたソースを貼り付けますので、HTMLソースの画面に切り替えて下さい。
HTMLソースの上の方を見てみると、下のように<TITLE> </TITLE>で囲われた部分があると思いますので、その下に挿入します。

[挿入前] 赤で囲われている部分の下に上のソースを挿入します。


[挿入後] 赤で囲われている部分が挿入したソースです。


ソースを貼り付ける時は、分かりやすいように </TITLE> の後ろでクリックし、カーソルを移動させ、数回改行してスペースを空けてから挿入すると分かりやすいかと思います。



3. ソースの修正
貼り付けたソースに表示させるページや画像、サイズに合わせて修正していきます。
修正する項目は3つで、複数の小窓を付ける時は、それぞれに設定していきます。 (複数の場合は後記します)
下の表にある部分をソース内で探し、それぞれ修正して下さい。

URL ファイル名又はURL
URLの文字を消し、代わりに表示したいページの
ファイル名に修正します。 (http:// からでも可)。
width=100 小窓の幅
表示させる小窓の 「幅」 を指定します。
数値だけ修正し、他の部分を消してしまわないように
注意してください。
height=100 小窓の高さ
表示させる小窓の 「高さ」 を指定します。
数値だけ修正し、他の部分を消してしまわないように
注意してください。

※ 小窓にページを表示させたい時は別途小窓用のページを用意
   し、そのページを指定して下さい。




・このページの設定例
例えばページ上部のサンプル [小窓1] は、下のように設定したいので、
修正項目 設定した項目
ファイル名又はURL aimixlogoy.jpg
小窓の幅 210
小窓の高さ 150

ソースの修正後は下のようになります。
<SCRIPT language="JavaScript">
<!--
function mado1(){
window.open("aimixlogoy.jpg","new","width=210,height=150");
}
// -->
</SCRIPT>





4. リンクの設定
ソースの修正が完了したら、小窓へリンクを設定します。
通常のリンクと同じように、文字や画像を右クリックし、[リンクの挿入]を選択します。

リンクの設定ではファイル名に下記をコピー・ペーストして下さい。

javascript:mado1()


これで小窓の設定は完了ですが、そのままプレビューすると表示されませんので一度ページを保存し、プレビューして下さい。




 その他

小窓を複数表示する場合を下のページで説明しています。

ページ中に複数の小窓を設置してみる







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