■ 「サブウインドウ」を極める

サブウインドウは、使い方次第では非常に便利だし、いろいろな表現パターンに応用可能です。
ここでは、クリックでの開き方から、様々な応用までご紹介します。
基本的には「Javascript」を使いますが、コピーして値を変えるだけで簡単に使えますよ。


▼ 開く&ウインドウについて細かく設定

★ 「HEAD」タグ内
<script language="JavaScript">
<!--
function winopen(url,name,features) {
window.open(url,name,features);
}
//-->
</script>

★ 「 <a href="javascript:winopen('表示したページのURL','サブウインドウ名','サイズなどの設定')">文字</a> 」

◆ サイズなどの設定:
width サブウインドウの横幅を設定
height サブウインドウの高さを設定
scrollbars スクロールバーを表示するかどうか(yes か no)
location ロケーションバーを表示するかどうか(yes か no)
menubar メニューバーを表示するかどうか(yes か no)

・「HEAD」タグ内にこのように書くことで、同じページに何カ所でも、好きに条件を変えてサブウインドウを出すことができます。
 「HEAD」タグ内にいちいちURL等を指定する従来の方法より、こちらの方を使った方が非常に便利です。



◆ sample:
例としてYahoo!をサブウインドウで

ソース:
★ 「HEAD」タグ内
<head>
<script language="JavaScript">
<!--
function winopen(url,name,features) {
window.open(url,name,features);
}
//-->
</script>
</head>

★ リンク部分
<a href="javascript:winopen('http://www.yahoo.co.jp/','sub','width=300,height=250,scrollbars=no,location=no,menubar=no')">
例としてYahoo!をサブウインドウで</a>



▼ サブウインドウの開く位置を指定

★ 上記の「サイズなどの設定」のところで以下の要素を加えます
left 開きたい位置のX座標
top 開きたい位置のY座標

screenX 開きたい位置のX座標
screenY 開きたい位置のY座標

・IEとNNでは指定する引数が違いますので、両ブラウザに対応させたい場合は両方指定してください。



◆ sample:
今度はサブウインドウが左上端(座標 0,0)で開きます

ソース:
★ 「HEAD」タグ内は同じ

★ リンク部分
<a href="javascript:winopen('http://www.yahoo.co.jp/','sub','width=300,height=250,scrollbars=no,location=no,menubar=no,left=0,top=0,screenX=0,screenY=0')">
今度はサブウインドウが左上端(座標 0,0)で開きます</a>



▼ サブウインドウをフルスクリーン(画面いっぱい)で開く

★ 「 <a href="javascript:winopen('表示したページのURL','サブウインドウ名','fullscreen=yes')">文字</a> 」
「サイズなどの設定」の代わりに、「fullscreen=yes」と指定する

・フルスクリーン(画面いっぱい)での表示は、見ている人に迷惑をかけますので、
 特にクリエイティブな意味がないのであればやめるように。どうしても使う場合は、「一言」書いておきましょう。
・これはIEのみで動作します。



▼ サブウインドウを常に前面に表示させる

★ 「 <body onBlur="focus()"> 」
常に前面に表示させたいサブウインドウの「BODY」タグの中に上記のように指定する

・サブウインドウを常に前面に表示させることによって、内容を目立たせることができます。
 しかしあまり良い印象は与えないので、臨機応変に使ってくださいね。