初心者に分かりやすい
ホームページ作成
ブログ(レビュー カメラ 写真)
無料CGI(Perl/PHP)配布
写真

 

 

 



 

JavaScriptでサブウインドウ表示

 

 ボタンやリンクをクリックしたら小さいウインドウ別途開くJavaScriptです。ウインドウサイズ、背景色、内容をリンク毎に指定することができます。ちょっとしたTipsやHintsを表示するので最適です。

 

例1) ボタンを使ってサブウインドウ表示

 

例2) リンクを使ってサブウインドウ表示

 ホームページはHTMLという言語を使って作られています。

 

ソース

 まず最初に、次のタグを<head>タグから</head>タグの間にコピーします。よく分からない場合は、</head>の直前に入れてやって下さい(は改行マークです)。

<script language="JavaScript">
<!--//Open Subwindow (http://www.coolandcool.net/)

function WinOpen(color,x,y,msg){
var Win1=window.open('','Subwin','scrollbars=1,
resizable=1,width='+x+',height='+y+'');
if(navigator.appVersion.charAt(0)>=3){Win1.focus()};
Win1.document.clear();
Win1.document.write("<html><head><meta http-equiv=Content-Type content='text/html; charset=x-sjis'><title>Sub Window</title></head>");
Win1.document.write("<body bgcolor="+color+">");
Win1.document.write(msg);
Win1.document.write("<p align=center><form>
<input type=button value='閉じる' onClick='window.close()'></form></p>");
Win1.document.write("</body></html>");
Win1.document.close();
}

//-->
</script>

 

 リンク部分は次の通りです。

 ボタンタイプ

<form>
<input type="button" value="ボタンに表示する文字" on Click="WinOpen('背景色','ウインドウ横サイズ','ウインドウ縦サイズ','内容(タグ可)');">
</form>

 通常リンクタイプ

<a href="JavaScript:onClick=WinOpen('背景色','ウインドウ横サイズ','ウインドウ縦サイズ','内容(タグ可)');">リンクさせたい文字</a>

 

リンクの具体例はこのような感じです。

<form>
<input type="button" value="説明" onClick="WinOpen('#000000','300','100','<p><font size=2 color=#FFFFFF>ヒントを探せ!</font></p>')">

</form>

 

注意: 「内容」文にはHTMLタグが使えますが、「”」や「’」は使わないでください。どうしても使わなければいけないときは「\"」このように書きます。

例)

<font size=2> …… ○
<font size="2"> …… ×
<font size=\"2\"> …… ○

 

表示されるウインドウのスクロールバーを無くす

 スクロールバーを表示されないようにします(この場合でもユーザーはウインドウサイズを自由に変更することができます)。

 

 ヘッドタグ内に入れる記述のうち、

var Win1=window.open('','Subwin','scrollbars=1,
resizable=1,width='+x+',height='+y+'');

 この部分を以下のように書き換えます。

var Win1=window.open('','Subwin','resizable=1,
width='+x+',height='+y+'');

 

壁紙を指定する

 開いたサブウインドウに壁紙を使うこともできます。ヘッドタグ内に入れる記述を次のように書き換えます(は改行マークです)。

<script language="JavaScript">
<!--//Open Subwindow (http://www.coolandcool.net/)

function WinOpen(color,x,y,msg,img){
var Win1=window.open('','Subwin','scrollbars=1,
resizable=1,width='+x+',height='+y+'');
if(navigator.appVersion.charAt(0)>=3){Win1.focus()};
Win1.document.clear();
Win1.document.write("<html><head><meta http-equiv=Content-Type content='text/html; charset=x-sjis'><title>Sub Window</title></head>");
Win1.document.write("<body bgcolor="+color+" background="+img+">");
Win1.document.write(msg);
Win1.document.write("<p align=center><form>
<input type=button value='閉じる' onClick='window.close()'></form></p>");
Win1.document.write("</body></html>");
Win1.document.close();
}

//-->
</script>

 

 リンクは次のようになります。

 ボタンタイプ

<form>
<input type="button" value="ボタンに表示する文字" on Click="WinOpen('背景色','ウインドウ横サイズ','ウインドウ縦サイズ','内容(タグ可)','壁紙ファイルのパス');">
</form>

 通常リンクタイプ

<a href="JavaScript:onClick=WinOpen('背景色','ウインドウ横サイズ','ウインドウ縦サイズ','内容(タグ可)','壁紙ファイルのパス');">リンクさせたい文字</a>

 

 リンクの具体例はこのような感じです。

<form>
<input type="button" value="説明" onClick="WinOpen('#000000','300','100','<p><font size=2 color=#FFFFFF>説明文を表示します。</font></p>','../mura_a02.gif')">
</form>

 

 

[ 戻る ]

 


人気記事ランキング
   

サイトマップ
コンタクト

文章や画像等の無断利用・転載はご遠慮ください。
当サイトへのリンクは原則フリーです。どのページにリンクされても構いません。
Copyright © CoolandCool. All rights reserved.