利用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://renniaofei.com/wp-content/themes/renniaofei/images/default-thumbnail.gif" alt="image">
</div>
预览此效果:css-javascript-inline-informational-overlays-code
标签:CSS JavaScript