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