リンクにマウスを重ねるとポップアップウィンドウが開きます。
ポップアップ１　ポップアップ２

ソース表示

<html>
<head>
<title>ポップアップのサンプル</title>
<STYLE type="text/css">
<!--
.box {position:absolute;visibility:hidden;border:5 ridge blue;padding:5;background-image:url(./image/pop_yellow.gif);overflow-x:visible;width:300;font-size:smaller;color:brown;font-weight:bold;z-index:1;}
.box1 {position:absolute;visibility:hidden;border:5 ridge blue;padding:5;background-image:url(./image/pop_green.gif);overflow-x:visible;width:200;font-size:smaller;color:brown;font-weight:bold;z-index:1;}
//-->
</STYLE>
<script language="javascript">

function pop(msg){
    x = event.clientX+document.body.scrollLeft+10;	//左からの位置
    y = event.clientY+document.body.scrollTop+10;	//上からの位置

	box.style.left = x;
	box.style.top = y;
	box.style.visibility = "visible";
	box.innerHTML = msg;
}
function nonPop(){
	if(box.style.visibility == "visible"){
		box.style.visibility = "hidden";
	}
	if(box1.style.visibility == "visible"){
		box1.style.visibility = "hidden";
	}
}

</script>
</head>
<body>
リンクにマウスを重ねるとポップアップウィンドウが開きます。<br>

<SPAN class="box" id="box"></SPAN>
<SPAN class="box1" id="box1"></SPAN>

<a href="popup1.html" id="pop" onMouseMove="pop('ここにポップアップ１の内容を書く<br>改行もできます<br>タグを使って<font color=#ff0000>文字の色<>を変えることもできます')" onMouseOut="nonPop()">ポップアップ１</a>　
<a href="popup2.html" id="pop" onMouseMove="pop('ここにポップアップ２の内容を書く<br>当然クリックすればリンク先に飛ぶこともできます')" onMouseOut="nonPop()">ポップアップ２</a><br>
<br>
</body>
</html>
出展：ヨッシーの”ホームページを作ろう！”