Jeans & Development コンピューターのことなどを綴ったメモ (旧：目から鱗 w/SQLite)

レイヤー機能を使って、ポップアップ表示させるためのテスト。

<div id="layer1" style="DISPLAY: none;POSITION:absolute;">
<table bgcolor=#E0E0E0><TR><TD>ポップアップの内容をここに書く。</TD></TR></table>
</div>
<a href="javascript:" 
onMouseOver="javascript:document.getElementById('layer1').style.display='block';" 
onMouseOut="javascript:document.getElementById('layer1').style.display='none';"
>ポップアップ表示させるためのテスト。</a>

文書埋め込みのテスト。

<script type="text/javascript">//
function changeLayer2(){//
if (document.getElementById('layer2').style.display=='block') {document.getElementById('layer2').style.display='none'}//
else {document.getElementById('layer2').style.display='block'};//
}//
</script>
<a href="javascript:changeLayer2();">文書埋め込みのテスト。</a>
<div id="layer2" style="DISPLAY: none;">埋め込む文章をここに書く。</div>

レイヤー重ね合わせのテスト

<div id="layer3" style="DISPLAY:none;POSITION:absolute;" onMouseOut="javascript:document.getElementById('layer3').style.display='none';" class="code">上のレイヤー
</div><div onMouseOver="javascript:document.getElementById('layer3').style.display='block';" class="code">下のレイヤー
</div>

プルダウンメニューのテスト

Menu1 Item1 Item2 Item3

Menu2 Item1 Item2 Item3

<script style="text/javascript">//
var hideTimer=0;//
var elementId=0;//
var timerObj=0;//
function showLayer(layer){//
  elementId=document.getElementById(layer);//
  i=1;//
  while (eid=document.getElementById('pdmenu'+(i++).toString(10))) if (eid!=elementId) eid.style.display='none';//
  elementId.style.display='block';//
  hideTimer=0;//
  clearInterval(timerObj);//
}//
function hideLayer(layer){//
  hideTimer=0;//
  elementId=document.getElementById(layer);//
  timerObj=setInterval("timerCallBack()",100);//
}//
function timerCallBack(){//
  if ((++hideTimer)<5) return;//
  elementId.style.display='none';//
  hideTimer=0;//
  clearInterval(timerObj);//
}//
</script>
<table><tr><td>
<a href="javascript:" onMouseOut="javascript:hideLayer('pdmenu1');" onMouseMove="javascript:showLayer('pdmenu1');">Menu1</a>
<div id="pdmenu1" style="DISPLAY:none;POSITION:absolute;" onMouseOut="javascript:hideLayer('pdmenu1');" onMouseMove="javascript:showLayer('pdmenu1');"><a href="javascript:">Item1</a>
<a href="javascript:">Item2</a>
<a href="javascript:">Item3</a></div>
</td><td>
<a href="javascript:" onMouseOut="javascript:hideLayer('pdmenu2');" onMouseMove="javascript:showLayer('pdmenu2');">Menu2</a>
<div id="pdmenu2" style="DISPLAY:none;POSITION:absolute;" onMouseOut="javascript:hideLayer('pdmenu2');" onMouseMove="javascript:showLayer('pdmenu2');"><a href="javascript:">Item1</a>
<a href="javascript:">Item2</a>
<a href="javascript:">Item3</a></div>
</td></table>