【クリック募金】
【ウィルス対策】
【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】
 
 
 
 
 
|
ジャバスクリプト
タグの簡易テスト（別窓）
| ランダムメッセージ | ステータスバー
| アラート
| 背景色選択 | 画像の変化
| カウントダウン |
| 小窓 | リモコン
| お気に入りに追加 | パスワードでリンク
| リンク制限 |
小窓
| クリックで小窓表示 | 小窓を複数表示 |
小窓を複数表示（リンクでURL、サイズ指定） |
| スクロールバー、メニューバー、ツールバー、アドレスバー、ステータスバー を表示 |
■クリックで小窓表示
リンクをクリックすると小窓が表示されるジャバスクリプトです。
小窓用のページを別途用意する必要があります。ここでは「komado.html」としています。
「ホームページできるかな」内でも至るところで使っています。
ちょっとしたものを表示させるのにとても便利ですよ。
<html>
<head>
<title> </title>
☆スクリプト１をこの部分に記述します☆
</head>
<body>
☆「小窓のリンク」はこの部分の表示させたい場所に記述します☆
</body>
</html>
| スクリプト１ |
<script language="javascript">
<!--
function new_win(){
window.open("komado.html","","width=350,height=300");
}
//-->
</script> |
komado.htmlはあなたの表示させたいページの名前に直してくださいね。
横幅width=350・高さheight=300で小窓ウィンドウのサイズ変えられます。
| 表示例 |
小窓のリンク 記述 |
| 小窓表示♪ |
<a href="#" onClick="JavaScript:new_win();return
false">小窓表示♪</a> |
|
|
<form>
<input type="button" value="小窓表示♪" onClick="new_win()">
</form>
 ボタンを使う場合は<form>〜</form>タグで囲んでください。 |
 |
<a href="#" onClick="JavaScript:new_win();return
false">
<img src="画像" width="横幅 " height="高さ
" border="0" alt="代替テキスト">
</a>
←この場合は・・・
<a href="#" onClick="JavaScript:new_win();return
false">
<img src="banner.gif" width="88" height="31"
border="0" alt="小窓表示♪">
</a> |
■小窓を複数表示
リンクをクリックすると小窓が表示されるジャバスクリプトです。
小窓用のページを別途用意する必要があります。ここでは「komado.html」「komado2.html」「komado3.html」としています。
| スクリプト１ |
<script language="javascript">
<!--
function new_win(){
window.open
("komado.html","","width=350,height=300");
}
function new_win2(){
window.open
("komado2.html","","width=350,height=300");
}
function new_win3(){
window.open
("komado3.html","","width=350,height=300");
}
//-->
</script> |
| スクリプト１ 解説 |
function ***(){
↑の、*** の部分が関数名（プログラム名）です。
関数名ごとに表示させたいページを変えてくださいね。
上記の例では
関数名：new_win → 表示ページ：komado.html
関数名：new_win2 → 表示ページ：komado2.html
関数名：new_win3 → 表示ページ：komado3.html
として、これを↓のリンクで呼び出しています。 |
| 表示例 |
小窓のリンク 記述 |
小窓表示♪
小窓表示♪
小窓表示♪
|
<a href="#" onClick="JavaScript:new_win();return
false">小窓表示♪</a>
<a href="#" onClick="JavaScript:new_win2();return
false">小窓表示♪</a>
<a href="#" onClick="JavaScript:new_win3();return
false">小窓表示♪</a> |
Point
小窓表示する html を変更し関数名を変えたものを複数記述し、その関数名ごとにリンクすればＯＫですよ
■小窓を複数表示（リンクでURL、サイズ指定）
リンクをクリックすると小窓が表示されるジャバスクリプトです。
小窓用のページを別途用意する必要があります。ここでは「komado1.html」「komado2.html」「komado3.html」としています。
上記のジャバスクリプトと違う点は、<body>のリンク部分でURL、サイズ指定をし、<head>部分に記述するジャバスクリプトの編集がほとんど必要ないことです。小窓をたくさん表示させるときはこちらが便利だと思います。
<html>
<head>
<title> </title>
☆スクリプト２をこの部分に記述します☆
</head>
<body>
☆「小窓のリンク」はこの部分の表示させたい場所に記述します☆
</body>
</html>
| スクリプト２ |
<script language="javascript">
<!--
function mini_win(theURL,winName,features) {
window.open(theURL,winName,features);
}
//-->
</script> |
| 表示例 |
小窓のリンク 記述 |
小窓表示♪
小窓表示♪
小窓表示♪
|
<a href="javascript:;" onClick="mini_win('komado1.html','','width=350,height=300')">小窓表示♪</a>
<a href="javascript:;" onClick="mini_win('komado2.html','','width=350,height=300')">小窓表示♪</a>
<a href="javascript:;" onClick="mini_win('komado3.html','','width=350,height=300')">小窓表示♪</a>
|
|
|
<form>
<input type="button" value="小窓表示♪" onClick="mini_win('komado1.html','','width=350,height=300')">
<input type="button" value="小窓表示♪" onClick="mini_win('komado2.html','','width=350,height=300')">
<input type="button" value="小窓表示♪" onClick="mini_win('komado3.html','','width=350,height=300')">
</form>
※ボタンを使う場合は<form>〜</form>タグで囲んでください。 |
| |
<a href="javascript:;" onClick="mini_win('komado1.html','','width=350,height=300')">
<img src="画像" width="横幅 " height="高さ
" border="0" alt="代替テキスト">
</a>
←この場合は・・・
<a href="javascript:;" onClick="mini_win('komado1.html','','width=350,height=300')"><img
src="../banner-hp.gif" width="88" height="31"
border="0" alt="小窓表示♪"></a> |
komado.html等URLはあなたの表示させたいページの名前に直してくださいね。
リンク先の、横幅width=350・高さheight=300で小窓ウィンドウのサイズ変えられます。
■スクロールバー、メニューバー、ツールバー、アドレスバー、ステータスバー
を表示
上記でご紹介した小窓はすべてタイトルバーしか表示されません。
スクロールバー、メニューバー、ツールバー、アドレスバー、ステータスバー を表示させたい時は以下の記述をそれぞれ付け足す必要があります。
| ■クリックで小窓表示 の場合 |
<script language="javascript">
<!--
function new_win(){
window.open("komado.html","","width=350,height=300,scrollbars=yes");
}
//-->
</script> |
| 解説 |
<head>内に記述した「スクリプト１」の、ウィンドウサイズを指定した後に ,（カンマ）で区切り、表示させたいバーの記述をします。
続けて ,（カンマ）で区切り、表示させたいバーを追加することもできます。 |
| ■小窓を複数表示（リンクでURL、サイズ指定） の場合 |
| <a href="javascript:;" onClick="mini_win('komado1.html','','width=350,height=300,scrollbars=yes')">小窓表示♪</a> |
| 解説 |
<body>内に記述した「小窓のリンク」の、ウィンドウサイズを指定した後に ,（カンマ）で区切り、表示させたいバーの記述をします。
続けて ,（カンマ）で区切り、表示させたいバーを追加することもできます。 |
Point
それぞれのバーを表示させない時は記述しないか、または =yes の部分を =no と記述します。
「デザイン的にこのバーだけは表示させたくない！」というときは =no とした方がブラウザに左右されず確実のようです。
このページのトップへ
|
ホームページのデザインテンプレートをダウンロードできるサイト
