いいモノみーつけた!


  パソコン使い方教室:ホームページ小技集


  HOME


  

背景関連


   

グラデーション



  

画像関連


   

サムネイル(1)


   

サムネイル(2)


   

スライドショウ


   

クリックで切り替え



  

日付・時間表示関連


   

時刻表示(1)


   

時刻表示(2)


   

時間別メッセージ


   

曜日別メッセージ


   

日別メッセージ



  

テキスト関連


   

文字列の点滅



  

ウインドウ関連


   

サブウインドウの表示



  

一般的な便利技


   

クリッカブル マップ


  

関連サイト


   

パソコン使い方教室


   

ホームページ講座


   

CSS 講座




サブウインドウの表示


サブウインドウ(ポップアップウインドウとも言う)は、詳細な情報等を別ウィンドウで表示する手法です。
次の例では、当サイトの全容をお知らせしています。






上の例のタグソースは、次の通りです。
但し、サブウインドウとして表示する .html ファイルは、ご自身で用意して同じディレクトリに置く必要があります。


行数

タグソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
<head>
<title>サブウインドウ</title>

<script language="JavaScript">
<!--

function showMsg(url){
window1 = window.open(url,"window1","resizable=1,width=300,height=200");
}

//-->
</script>

</head>
<body>

<br>下のボタンクリックでサブウィンドウが開きます。<br><br>
<form>
<input type="button" value="サブウィンドウのタイトル"
onClick="showMsg('サブウィンドウのファイル名')">
</form>

</body>
</html>


9行目の width=300,height=200 は、サブウインドウの大きさを指定しています。
20行目のサブウィンドウのタイトルは、ご自身で用意したサブウィンドウの .html のタイトル名に変更する必要があります。
21行目の サブウィンドウのファイル名 は、ご自身で用意したサブウィンドウのファイル名に変更してください。



Copyright (C) N.Hamano All Rights Reserved