RSS
 
 HOME >> Web >> ホームページ作成のヒントとアドバイス  
初心者に分かりやすい
このWebサイトについて
ホームページ作成
40ソアラ/レクサスSCブログ
無料フリー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>

　

[ 戻る ]

 

   
HOME >> Web >> ホームページ作成のヒントとアドバイス 

 

 












サイトマップ
コンタクト

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