■ 「サブウインドウ」を極める
サブウインドウは、使い方次第では非常に便利だし、いろいろな表現パターンに応用可能です。ここでは、クリックでの開き方から、様々な応用までご紹介します。
基本的には「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」タグの中に上記のように指定する
・サブウインドウを常に前面に表示させることによって、内容を目立たせることができます。
しかしあまり良い印象は与えないので、臨機応変に使ってくださいね。
[ → BACK ]