注をその場で表示するJavaScript

IE6でしか動作確認していません。Netscapeや他のwebブラウザでは動作しないでしょう。
お試しになる場合は、自己責任でお願いします。
お試しにならない人は、[Back Space]キーを押して、戻ってください。マウスポインタを移動させると、ブラウザが止まってしまうことがあります。
5以下のIEやNetscapeや他のwebブラウザでも動作するJavaScriptがあれば、下さい(^_^)。

sampleページに移動します。

機能
 span その他のタグでくくった部分にマウスを置くと、近くに小窓がポップアップする
組込
<head></head>内に
<script language="JavaScript" src="spanalt.js"></script>
を置いて、組み込む。
 </body>直前に
<span ID="nt" STYLE="position:absolute;"></span>
を書いておく（ダミー）。
実装
 <span LANGUAGE=javascript onmouseout="msgh()" onmouseover="msgv(event.x,event.y,'おおたやじょうぞうのおはなし')">太田屋醸造のお話</span> と書く。
この場合だと、太田屋醸造のお話にマウスを置くと、おおたやじょうぞうのおはなし　がポップアップする。
例は、 <span>だけれど、他のタグでも実装可能注。
注意
 ''内はhtmlなので、<br>他のタグが有効。
ただし、""でくくらなければならないような属性は指定できない。

sampleページに移動します。

spanalt.js

spanalt.js です。

function msgv(x,y,s){
var w=400;
var h=200;
nt.style.color = "#000000";
nt.style.fontSize="86%";
nt.style.borderWidth = 1;
nt.style.borderStyle ="solid";
nt.innerHTML = s;
nt.style.pixelWidth =w;
nt.style.pixelHeight =h;
if(x<w){nt.style.pixelLeft = document.body.scrollLeft +x+5;}
else{nt.style.pixelLeft = document.body.scrollLeft +x-w-5;}
if(y<h){nt.style.pixelTop = document.body.scrollTop +y+5;}
else{nt.style.pixelTop = document.body.scrollTop +y-h-5;}
nt.style.padding = 10;
nt.style.backgroundColor = "#e8e8f0";
nt.style.visibility = "visible";
}
function msgh(){
nt.style.visibility = "hidden";
}

sampleページに移動します。

補足

大阪教育大学　 国語教育講座　 野浪正隆研究室　 ↑ページTop　 ←戻る

スパムメール対策のため、フリ−メールは受信拒否しています。
mailto: nonami@cc.osaka-kyoiku.ac.jp
Last update: 2003/01/07 16:44