任鸟飞网站设计博客

利用CSS和Javascript实现网页内嵌信息响应鼠标事件，当鼠标滑过网页中某个给定的区域时，就会调用Javascript ，实现内嵌信息的显示与隐藏。

其实实现此特效的代码很简单，原理就是利用Javascript控制XHTML元素的现实与隐藏，下面列出其代码，供参考。
Javascript 代码

<script language="javascript">
function showLayer(layerName, shadowLayerName) 
{ 
   if (document.getElementById) // Netscape 6 and IE 5+ 
   { 
       var targetElement = document.getElementById(layerName); 
       targetElement.style.visibility = 'visible'; 
  } 
} 
 
function hideLayer(layerName) 
{ 
   if (document.getElementById) 
  { 
       var targetElement = document.getElementById(layerName); 
      targetElement.style.visibility = 'hidden'; 
   } 
} 

</script>

XHTML代码

<div id="hover" onmouseover="showLayer('image')" onmouseout="hideLayer('image')">
鼠标移动到这里就可以显示任鸟飞网页设计网的站标
</div> 
<div id="image" style="visibility: hidden;"> 
   <img src="http://www.renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" alt="image">
</div>

预览此效果：css-javascript-inline-informational-overlays-code