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>←マウスを当ててください

リンクや画像タグに
onMouseover="opentext('説明')" onMouseout="opentext('')" と入れます。