JerrySoft

导航

鼠标悬停显示提示信息

<script>
 <!--设置在页面上鼠标经过得事件为quickalt-->   
 document.body.onmousemove = quickalt;
 <!--显示提示框方法,这个方法能让alt提示立即出现,而不是停留一段时间-->
 function quickalt()
 {
  if (event.srcElement.hint)
  {
   event.srcElement.alt = event.srcElement.hint;
  }
  if (event.srcElement.alt)
  {
   if (event.srcElement.alt != '')
   {
    event.srcElement.hint = event.srcElement.alt;
    altlayer.style.visibility = 'visible';
    altlayer.style.left = event.x-1;
    altlayer.style.top = event.y+20;
    alttext.innerHTML = event.srcElement.hint
    event.srcElement.alt = "";
   }
  }
  else
  {
   altlayer.style.visibility = 'hidden';
  }
 }
</script>

以下是用于显示提示得div
<div style="position:absolute;visibility:hidden" id="altlayer">
 <table id="divtb" border="0" cellspacing="0" cellpadding="0">
  <tr height="5px">
   <td width="2px"><img src="../Images/tooltip/tl.gif" /></td>
   <td background="../Images/tooltip/tm.gif"></td>
   <td width="2px"><img src="../Images/tooltip/tr.gif" /></td>
  </tr>
  <tr>
   <td style="border-left:1px solid #666;background-color:white;"><img height="1px" width="1px" /></td>
   <td id="alttext" style="font-size:12px;padding:0 3px 0 3px;background-color:white;"></td>
   <td style="border-right:1px solid #666;background-color:white;"><img height="1px" width="1px" /></td>
  </tr>
  <tr height="2px">
   <td width="2px"><img src="../Images/tooltip/bl.gif" /></td>
   <td style="border-bottom:1px solid #666;background-color:white;"><img height="1px" width="1px" /></td>
   <td width="2px"><img src="../Images/tooltip/br.gif" /></td>
  </tr>
 </table>
</div>

posted on 2006-04-26 09:10  水-手  阅读(1645)  评论(0)    收藏  举报