以下的代码是关于鼠标滑过图层DIV,就显示DIV2的内容。滑开就隐藏DIV2的内容。默认DIV2是隐藏的。现在有一个问题是,我需要滑过的图层有7个,相应的另外的图层内容也是7个。因为我不会写这样的JS代码。
所以想着用最笨的办法就是,SHOWTIP()写7个,只是把里面的DIV2更换了其他的ID名。我觉得这样也太笨了,请教坛子里的高手能出现解决一下这个问题。、、
小女子,谢过。**************************************以下是代码***************************************
<script type="text/javascript">
//在鼠标显示一个层,该层的内空为div2的内容
function showTip2()
{
var div2 = document.getElementById('div2'); //将要弹出的层
div2.style.display="block"; //div2初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div2.style.left=event.clientX+15; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div2.style.top=parseInt(event.y)+5+document.body.scrollTop;
div2.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}
//关闭层div2的显示
function closeTip2()
{
var div2 = document.getElementById('div2');
div2.style.display="none";
}
</script>
<div align="center" onMouseMove="showTip2()" onMouseOut="closeTip2()">
<img src="headimage/1.jpg" width="70" height="86" border="1" style="border-color:#f9e502"></div>
<div id="div2" style="display:none;background-color :#A10F10; border:1 solid #f9e502;width:300;height:300">
111111111111
</div>
所以想着用最笨的办法就是,SHOWTIP()写7个,只是把里面的DIV2更换了其他的ID名。我觉得这样也太笨了,请教坛子里的高手能出现解决一下这个问题。、、
小女子,谢过。**************************************以下是代码***************************************
<script type="text/javascript">
//在鼠标显示一个层,该层的内空为div2的内容
function showTip2()
{
var div2 = document.getElementById('div2'); //将要弹出的层
div2.style.display="block"; //div2初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div2.style.left=event.clientX+15; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div2.style.top=parseInt(event.y)+5+document.body.scrollTop;
div2.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}
//关闭层div2的显示
function closeTip2()
{
var div2 = document.getElementById('div2');
div2.style.display="none";
}
</script>
<div align="center" onMouseMove="showTip2()" onMouseOut="closeTip2()">
<img src="headimage/1.jpg" width="70" height="86" border="1" style="border-color:#f9e502"></div>
<div id="div2" style="display:none;background-color :#A10F10; border:1 solid #f9e502;width:300;height:300">
111111111111
</div>
//在鼠标显示一个层,该层的内空为div2的内容
function showTip2(sId)
{
var div2 = document.getElementById(sId); //将要弹出的层
div2.style.display="block"; //div2初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div2.style.left=event.clientX+15; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div2.style.top=parseInt(event.y)+5+document.body.scrollTop;
div2.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}
//关闭层div2的显示
function closeTip2(sId)
{
var div2 = document.getElementById(sId);
div2.style.display="none";
}
</script>
<div align="center" onMouseMove="showTip2('div2')" onMouseOut="closeTip2('div2')">
<img src="headimage/1.jpg" width="70" height="86" border="1" style="border-color:#f9e502"></div>
<div id="div2" style="display:none;background-color :#A10F10; border:1 solid #f9e502;width:300;height:300">
111111111111
</div>
//在鼠标显示一个层,该层的内空为div2的内容
function showTip2(o)
{
//var div2 = document.getElementById('div2'); //将要弹出的层
var div2=o.nextSibling;
div2.style.display="block"; //div2初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div2.style.left=event.clientX+15; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div2.style.top=parseInt(event.y)+5+document.body.scrollTop;
div2.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}
//关闭层div2的显示
function closeTip2(o)
{
//var div2 = document.getElementById('div2');
var div2=o.nextSibling;
div2.style.display="none";
}
</script>
<div align="center" onMouseMove="showTip2(this)" onMouseOut="closeTip2(this)">
<img src="headimage/1.jpg" width="70" height="86" border="1" style="border-color:#f9e502"></div>
<div id="div2" style="display:none;background-color :#A10F10; border:1 solid #f9e502;width:300;height:300">
111111111111
</div>
<div align="center" onMouseMove="showTip2(this)" onMouseOut="closeTip2(this)">
<img src="headimage/1.jpg" width="70" height="86" border="1" style="border-color:#f9e502"></div>
<div id="div2" style="display:none;background-color :#A10F10; border:1 solid #f9e502;width:300;height:300">
222222222222
</div>