| TOP /すぐに使えるJavaScript | ポップアップテキストU(IE5.0 NN6対応) |
|---|
ポップアップでリンクに説明←マウスを当ててください
ポップアップで文字に説明←マウスを当ててください
<script type="text/javascript"><!--
b_color="red"; //枠の色
g_color="pink"; //背景の色
f_size="10"; //文字サイズ
f_color="red"; //文字色
set_x=50; //オフセットX
set_y=-30; //オフセットY
tw=200; //幅
//--------------------------------------
tablew=0;s_text="";
document.write("<div ID='mytext' STYLE='position:absolute;z-index:2;'></div>");
if(document.all){obj=document.all("mytext");}
else{obj=document.getElementById("mytext");}
setstyle="STYLE='border-color:"+b_color+";font-size:"+f_size+"pt;background-color:"+g_color+";color:"+f_color+";'"
function opentext(settxt){
s_text=settxt;
if(settxt && tablew==0){
if(document.all){
rx = event.clientX + document.body.scrollLeft +set_x;
ry = event.clientY + document.body.scrollTop +set_y;
}else{
rx =NNX+set_x;
ry =NNY-set_y;}
obj.style.left = rx +"px";
obj.style.top = ry +"px";
tableset();
}else{obj.innerHTML = ""; tablew=0;}
}
function tableset(){
tablew = tablew +25;
if(!s_text){
obj.innerHTML = "";
}else if(tablew < tw){
settext = "<table border=1 cellspacing=0 cellpadding=5 height=60 width="+tablew+" "+setstyle+"><td></td></table>";
obj.innerHTML = settext;
setTimeout("tableset()",50);
}else{
settext = "<table border=1 cellspacing=0 cellpadding=5 height=60 width="+tablew+" "+setstyle+"><td>"+s_text+"</td></table>";
obj.innerHTML = settext; tablew=0;
}
}
function MouseXY(NNevent){
NNX = NNevent.pageX;
NNY = NNevent.pageY;
}
window.onmousemove = MouseXY;/* himajin.moo.jp */
// --></script>
<a href="../index.html" onMouseover="opentext('説明内容<br>ここに説明が入ります。')" onMouseout="opentext('')">ポップアップでリンクに説明</a>←マウスを当ててください
<br><br>
<span onMouseover="opentext('同じページ内であれば<br>同じJavaScriptを使って<br>いくつでも説明を<br>付けることが<br>できますよ!')" onMouseout="opentext('')">ポップアップで文字に説明</span>←マウスを当ててください