SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [ポップアップウインドウ]

ポップアップウインドウ

機能

テキスト上をマウスが通過したとき、ポップアップウインドウを開くダイナミックHTMLです。今となっては、HTMLのTITLE属性などがその機能を果たしてくれるブラウザもありますが、逆にそうでもないブラウザもあります。この非対応ブラウザにも同じ機能を実現しようとしたものがこのスクリプトです。

類似サンプル

ポップアップウインドウ（ヘルプ風）

利用方法

HEAD部分にスタイル(CSS)とスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iL1,iL2を指定します。

一般的にアンカーに対してポップアップさせるでしょうから、A要素の属性としてイベントハンドラ属性onmouseover="Mover(1)" onmouseout="Mout(1)"を指定します。ただし、()内の数値はスクリプトのcomments[1]の[]内数値に対応しています。（ここでは１～２）最後にBODY要素の属性として、イベントハンドラonloadに関数Init()を指定します。

改造方法

ポップアップするテキストのスタイルと数を変更可能です。

スタイル(Style1)

CSSリファレンスに従って、変更可。ただし、NNに対してはスクリプト内に記述しているので、そちらを変更する必要があります。

ウインドウの位置・大きさ

layX：ウインドウの左座標
layY：ウインドウの上座標
layW：ウインドウの幅
layH：ウインドウの高さ

をそれぞれピクセル単位で指定します。

ウインドウの数

まず、Laymaxの数値を指定します。 ID属性iLxを指定しているDIV要素を増やします。その時、iLxの「x」の部分の数値も増やします。この増やした数分だけのウインドウに表示するコメントを増やします。具体的には配列変数comments[x]を増やします。

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>ポップアップウインドウ</TITLE>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:		absolute;
	font-size:		10pt;
	color:			#ffffff;
	background-color:	#6060ff;
	visibility:		hidden;
}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 2;	//ウインドウの最大数
var layX = 200;	//ウインドウの左座標
var layY = 50;	//ウインドウの上座標
var layW = 400;	//ウインドウの幅
var layH = 200;	//ウインドウの高さ
var comments = new Array();
comments[1] = '「初めてのホームページ講座」を始めとして、<BR>';
comments[1]+= '数多くのコンテンツを保有しています。<BR>';
comments[1]+= 'トップページに使っている技術は、<BR>';
comments[1]+= 'このポップアップウインドウのメニュー表示。<BR>';
comments[1]+= '皆さん使ってみてはどう？<BR>';
comments[1]+= 'それなりに見栄えが変わると思いますよ。<BR><BR>';
comments[1]+= 'でもこれは、NN4.0以上のみに対応しています。<BR>';
comments[2] = '元のページに戻ります。<BR>';
comments[2]+= '普通だったら、このリンク先のページでしょうけど、<BR>';
comments[2]+= 'ここでは、JavaScriptで書いてます。<BR>';
comments[2]+= 'だから、本当に来たページに戻ります。<BR><BR>';
comments[2]+= 'ここのサンプルとは関係ありませんが。<BR>';

var lay = new Array();

function Init(){
	for(i = 1; i <= Laymax; i++){
		if(iIE4){
			Mover(i);
			Mout(i);
		}
		if(iNN4){
			lay = document.layers["iL"+i];
			lay.visibility = "hide";
		}
	}
}

function Mover(n){
	if(iIE4){
		lay = document.all("iL"+n);
		lay.innerHTML = comments[n];
		lay.style.left = layX;
		lay.style.top = layY;
		lay.style.width = layW;
		lay.style.height = layH;
		lay.style.visibility = "visible";
	}
	if(iNN4){
		lay = document.layers["iL"+n];
		lay.document.open();
		lay.document.fgColor = "#ffffff";
		lay.document.bgColor = "#6060ff";
		lay.document.write(comments[n]);
		lay.document.close();
		lay.left = layX;
		lay.top = layY;
		lay.clip.width = layW;
		lay.clip.height = layH;
		lay.visibility = "show";
	}
}

function Mout(n){
	if(iIE4){
		lay = document.all("iL"+n);
		lay.style.visibility = "hidden";
	}
	if(iNN4){
		lay = document.layers["iL"+n];
		lay.visibility = "hide";
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<A HREF="http://www.hajimeteno.ne.jp/" 
	onmouseover="Mover(1)" onmouseout="Mout(1)">
	初めてのホームページ講座 のトップへ</A><BR><BR>
<A HREF="JavaScript:history.back();" 
	onmouseover="Mover(2)" onmouseout="Mout(2)">戻る</A>

<DIV ID="iL1" CLASS="Style1"></DIV>
<DIV ID="iL2" CLASS="Style1"></DIV>

</BODY>
</HTML>

[Go To Top]