HTML知识: 鼠标放在哪儿的链接就显示在哪儿的层-雪洁之家

鼠标放在哪儿的链接就显示在哪儿的层

今天需要实现放在名字上就显示他的图片的功能,所以就找了些,以下是参考代码,这个是鼠标放在哪个链接,层就在哪儿显示的代码,雪洁在这里分享,希望对大家有帮助。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
//在鼠标显示一个层,该层的内空为div2的内容
function showTip(){
var div3 = document.getElementById('div3'); //将要弹出的层
div3.style.display="block"; //div3初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left=event.clientX+10; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div3.style.top=event.clientY+15;
div3.style.position="absolute"; //必须指定这个属性,否则div3层无法跟着鼠标动
var div2 =document.getElementById('div2');
div3.innerHTML=div2.innerHTML;
}
//关闭层div3的显示
function closeTip(){
var div3 = document.getElementById('div3');
div3.style.display="none";
}

//控制层div2显示的开关
function switchDIV(){
if(div2.style.display=='block'){
div2.style.display='none';
}
else{
div2.style.display='block';
}
}
</script>
</HEAD>
<BODY>
<a href="#" onMouseMove="showTip()" onMouseOut="closeTip()" onClick="switchDIV()">链接</a>
<div id="div2" style="display:none;background-color:green">
<h1 color="blue">我是在div2里面的一句话!</h1>

</div>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#" onMouseMove="showTip()" onMouseOut="closeTip()" onClick="switchDIV()">链接</a>
<div id="div3" style="display:none;background-color :pink;width:250;height:50">
</div>
</BODY>
</HTML>

by 雪洁 2010-09-25 14:34:35 2956 views
我来说几句

相关文章