マウスオンでポップアップを表示する。 |
Sample 下のインデックスにマウスをオンして下さい。 |
Index_1
Index_2 Index_3 |
ソース |
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function set_descrip() { var x = navigator.appVersion; y = x.substring(0,4); if (y>=4) set_value(); } var x,y,a,b; function set_value(){ if (navigator.appName == "Netscape") { h=".left="; v=".top="; dS="document."; sD=""; } else { h=".pixelLeft="; v=".pixelTop="; dS=""; sD=".style"; } } var isNav = (navigator.appName.indexOf("Netscape") !=-1); function pop_layer(a){ desc = "<table cellpadding=4 border=2 bgcolor=#ffffe8><td>"; if (a==1) desc += "これは、インデックス−1です。"; if (a==2) desc += "これは、インデックス−2です。"; if (a==3) desc += "これは、インデックス−3です。"; desc += "</td></table>"; if(isNav) { document.object1.document.write(desc); document.object1.document.close(); document.object1.left=x+25; document.object1.top=y; } else { object1.innerHTML=desc; eval(dS+"object1"+sD+h+(x+25)); eval(dS+"object1"+sD+v+y); } } function hide_layer(a){ if(isNav) { eval(document.object1.top=a); } else object1.innerHTML=""; } function handlerMM(e){ x = (isNav) ? e.pageX : event.clientX; y = (isNav) ? e.pageY : event.clientY; } if (isNav){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; //--> </script> </HEAD> <BODY OnLoad="set_descrip()"> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"></div> <a href="#" onMouseOver="pop_layer(1)" onMouseOut="hide_layer(-50)">Index_1</a> <br><br> <a href="#" onMouseOver="pop_layer(2)" onMouseOut="hide_layer(-50)">Index_2</a> <br><br> <a href="#" onMouseOver="pop_layer(3)" onMouseOut="hide_layer(-50)">Index_3</a> <br><br> </BODY> </HTML> |
ワンポイント解説 |
desc = "<table cellpadding=4 border=2 bgcolor=#ffffe8><td>" で、ポップアップの形状を設定しています。
|