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

Dynamic HTMLの参考書 Java Scriptの参考書

ポップアップウインドウ(ヘルプ風)

機能

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

類似サンプル

  1. ポップアップウインドウ

利用方法

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

アンカーに対してポップアップさせるとして、A要素の属性としてイベントハンドラ属性onmouseover="Mover(1)" onmouseout="Mout(1)"を指定します。 ただし、()内の数値はスクリプトのcomments[1]の[]内数値に対応しています。(ここでは1〜5) ここで、「comments[x]」には、イベントハンドラに指定する整数値に対するコメント(表示する内容)を指定します。 また、HREF属性値には「JavaScript:void(0)」とします(リンク先があればそれを指定しても可)。

最後にBODY要素の属性として、イベントハンドラonloadに関数Init()を指定します。

改造方法

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

スタイル(Style1)
CSSリファレンスに従って、変更可。ただし、NNに対してはスクリプト内に記述しているので、 そちらを変更する必要があります。
ウインドウの数
まず、Laymaxの数値(ウインドウの個数)を指定します。 ID属性iLxを指定しているDIV要素を増やします。その時、iLxの「x」の部分の数値も増やします。 この増やした数分だけのウインドウに表示するコメントを増やします。 具体的には配列変数comments[x]を増やします。 最後に、これに対するアンカー(A要素)を増やし完了です。
ウインドウの幅
layWにピクセル単位で指定します。

対応ブラウザ

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">
<!--
A:link{
	font-weight:		bold;
	text-decoration:	none;
	color:			#ff0000;
}
A:visited{
	font-weight:		bold;
	text-decoration:	none;
	color:			#ff0000;
}
A:active{
	font-weight:		bold;
	text-decoration:	none;
	color:			#ff0000;
}
.Style1{
	font-size:		10pt;
	color:			#000000;
	background-color:	#fffacd;
	border-style:		solid;
	border-width:		1pt;
	border-color:		#000000;
	position:		absolute;
	bisibility:		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 = 5;		//ウインドウの最大数
var layW = 350;		//ウインドウの幅:IE用
var comments = new Array();
comments[1] = 'ターゲットにマウスが重なったときに表示するウインドウをいう';
comments[2] = '最新のHTML技術<BR>';
comments[2]+= 'インターラクティブなWebの作成が可能';
comments[3] = 'HTMLのスタイル部分を記述するための言語<BR>';
comments[3]+= '一般的にCSSが普及しており、様々なスタイルを実現できる';
comments[4] = '2大ブラウザを1つのスクリプトで共通使用できるようにすること';
comments[5] = '前のページに戻る';

var scrX,scrY;
var layX,layY,layH;
var lay = new Array();
var Lflag = false;
  
if(iIE4){
	document.onmousemove = Mmove;
}
if(iNN4){
	window.onmousemove = Mmove;
	window.captureEvents(Event.MOUSEMOVE);
}

function Init(){
	if(iIE4){
		scrX = document.body.clientWidth;
		scrY = document.body.clientHeight;
	}
	if(iNN4){
		scrX = innerWidth;
		scrY = innerHeight;
	}
	for(i = 1; i <= Laymax; i++){
		if(iIE4){
			lay[i] = document.all("iL"+i);
			lay[i].style.visibility = "hidden";
		}
		if(iNN4){
			lay[i] = document.layers["iL"+i];
			lay[i].visibility = "hide";
		}
	}
	Lflag = true;
}

function Mover(n){
	if(Lflag){
		if(iIE4){
			lay[n].innerHTML = comments[n];
			lay[n].style.left = layX;
			lay[n].style.top = layY;
			lay[n].style.width = layW;
			layH = lay[n].style.height;
			lay[n].style.visibility = "visible";
		}
		if(iNN4){
			lay[n].document.open();
			lay[n].document.fgColor = "#000000";
			lay[n].document.bgColor = "#fffacd";
			lay[n].document.write(comments[n]);
			lay[n].document.close();
			lay[n].left = layX;
			lay[n].top = layY;
			layW = lay[n].clip.width;
			layH = lay[n].clip.height;
			lay[n].visibility = "show";
		}
	}
}

function Mout(n){
	if(Lflag){
		if(iIE4){
			lay[n].style.visibility = "hidden";
		}
		if(iNN4){
			lay[n].visibility = "hide";
		}
	}
}

function Mmove(e){
	if(Lflag){
		if(iIE4){
			layX = event.clientX + 20;
			layY = event.clientY + 20;
		}
		if(iNN4){
			layX = e.pageX + 20;
			layY = e.pageY + 20;
		}
		if((layX + layW) >= scrX){
			layX = scrX - layW - 1;
			if(layX <= 1){
				layX = 1;
			}
		}
		if((layY + layH) >= scrY){
			layY = scrY - layH - 1;
			if(layY <= 1){
				layY = 1;
			}
		}
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<P>
Windowsヘルプ風の
<A HREF="JavaScript:void(0)" onmouseover="Mover(1)" onmouseout="Mout(1)">ポップアップウィンドウ</A>
スクリプトです。
<A HREF="JavaScript:void(0)" onmouseover="Mover(2)" onmouseout="Mout(2)">ダイナミックHTML</A>
を用いれば、このようなことも比較的簡単に実現できます。ただし、HTMLタグの知識、
<A HREF="JavaScript:void(0)" onmouseover="Mover(3)" onmouseout="Mout(3)">スタイルシート</A>
の基礎的な知識は当然として、JavaScriptを知っておく必要があります。
<P>
この他にも、オブジェクト指向風のプログラミング技術を多少必要としますので、それなりの努力は必要です。
また、インターネットエクスプローラとネットスケープナビゲータの2大ブラウザのみの対応となっており、
バージョンは4.0以上が動作可能です。
<P>
悪いことに、2大ブラウザの互換性は現在のところ非常に低く、
<A HREF="JavaScript:void(0)" onmouseover="Mover(4)" onmouseout="Mout(4)">クロスブラウジング</A>
にはノウハウも必要です。当スクリプトは、クロスしておりどちらのブラウザでも動作可能です。
<P>
<A HREF="JavaScript:history.back();" onmouseover="Mover(5)" onmouseout="Mout(5)">戻る</A>
</P>

<DIV CLASS="Style1" ID="iL1"></DIV>
<DIV CLASS="Style1" ID="iL2"></DIV>
<DIV CLASS="Style1" ID="iL3"></DIV>
<DIV CLASS="Style1" ID="iL4"></DIV>
<DIV CLASS="Style1" ID="iL5"></DIV>

</BODY>
</HTML>
[Go To Top]

Last modified Nov,2000
Copyright(C)1998 T.Miyazaki , All Rights Reserved.