リンクにマウスカーソルをのせると、メッセージがポップアップします。
MacOS9のIEでは、うまく表示されてませんでした。
MacOS9のネスケではアラートが出たり…。
WinのIEは問題なし、それ以外は未確認です。
<見本>
TOP
1) </title>〜</head>に以下のタグを入れます。
<style type="text/css">
<!--
body {overflow:scroll;overflow-x:hidden}
.dek {position:absolute;visibility:hidden;z-index:200;}
//-->
</style>
|
2) リンクの表示には、以下のタグを使います。
【メッセージ】は、ポップアップするテーブルの中に表示される文章などを書きます。
ここでは改行や、文字の装飾、画像などのタグも使えます。
<a href=【リンク先】
onmouseover="popup('【メッセージ】','')";
onmouseout="kill()">【リンクを貼る文字や画像】</a>
|
3) <body>〜</body>のどこかに以下のタグを入れます。
【位置・横】と【位置・縦】は、テーブルの位置を調整します。
リンクの真下にくるようにするには、横が「-70」、縦が「20」でちょうどいいと思います。
リンクが左端にある場合などは、リンクの右に出るようにするといいと思います。
見本は横が「10」、縦が「0」で調整して右に出るようにしています。
【枠の太さ】、【枠の色】、【背景色】はテーブルのデザインです。
他にもテーブルの装飾のタグが使えると思いますが、ネット環境による不具合とかがありそうなので
シンプルな方がいいかと思います。
<div id="dek" class="dek"></div>
<script type=text/javascript>
<!--
Xoffset=【位置・横】; // modify these values to ...
Yoffset=【位置・縦】; // change the popup position.
var nav,old,iex=(document.all),yyy=-1000;
if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}
if(!old){
var skn=(nav)?document.dek:dek.style;
if(nav)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=get_mouse;
}
function popup(msg,bak){
var content=
"<table border=【枠の太さ】 bordercolor=【枠の色】 cellpadding=3 cellspacing=0>
<td bgcolor=【背景色】>"+msg+"</td></table>";
if(old){alert(msg);return;}
else{yyy=Yoffset;
if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
}
}
function get_mouse(e){
var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
}
function kill(){
if(!old){yyy=-1000;skn.visibility="hidden";}
}
//
-->
</script>
|
「HTMLタグ」のトップに戻る
|
|
|
