csdn上当鼠标移动到图片，显示一个层

一个绝对位置的div先设置不可见.当用户鼠标移动到图片上时,触发一个事件.执行一个方法.在这个方法里,把这个不可见的div显示出来.div里面的信息也随之显示..
鼠标移开的时候做个判断.如果鼠标移开图片.但是在这个div上.那么继续显示.如果鼠标移开图片.也移开了这个div那么,执行一个方法.隐藏div..大概就是这样.很简单的.代码我就不写了.都说的很清楚了..

as.mouseover(function(event){
        var myevent = event || window.event;
        $("#stockInfo").css("left",(myevent.clientX+5)+"px").
                css("top",(myevent.clientY+5)+"px");
使用event的clientX和Y控制上边距和左边距。你自己试验下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var fa = false;
$("#baidu").bind("mouseover",function(event){
$(".out .in").show();
$(this).css("cursor","pointer");
});
$("#baidu").bind("mouseout",function(event){
// alert($(".out .in")[0].offsetLeft);
// if($(".out .in")[0].clientLeft<event.clientX)
var obj = document.elementFromPoint(event.clientX,event.clientY);
if(obj.id == "in")
{
$(".out .in").hover(function(){
$(this).show();
},function(){
$(this).hide();
});
}
else
{
$(".out .in").hide();
}
});
});
</script>
<style>
.out{width:600px; height:450px; position:relative; border: 1px solid red;}
.out img{border:1px solid #0F0;}
.out .in{width:250px; height:150px; position:absolute; left:180px; top:50px; border:1px solid #ccc; display:none}</style>
</head><body>
<div class="out">
<img id="baidu" src="http://www.baidu.com/img/baidu_logo.gif" />
<div id="in" class="in">这里面的内容你自己加.距离也自己调.</div>
</div>
</body>
</html>
你要的效果.IE6,IE7,FF测试可用.你自己修改下代码就可以了..

<a id="test01x00000000" onmouseover="ImageButton1_Click(event)" onmouseout="Hide();" href="#">Test 鼠标放上就显示</a><div id="testx01x000" style="position:absolute;display:none; z-index:0; border-color: inherit; font-size:14px;width:400px; float:left">
<img src="http://shhq-mossweb03:2019/loading.gif" alt="数据加载中...请稍后"/>数据加载中...请稍等
</div>
var flag = false;
var x = 0;
var y =0;
var winX = window.screen.height;
var winY = window.screen.width;
function ImageButton1_Click(ev) {
if(flag)
{
x = ev.clientX;
y = ev.clientY;
document.getElementById("testx01x000").style.top = winY -(winY -y);
    document.getElementById("testx01x000").style.left =winX -(winX -y)+400;
    document.getElementById("testx01x000").style.display = "";
    }else
    {
     x = ev.clientX;
y = ev.clientY;
document.getElementById("testx01x000").style.top = winY -(winY -y);
    document.getElementById("testx01x000").style.left =winX -(winX -y)+400;
    document.getElementById("testx01x000").style.display = "";
ImageButton2_Click();
flag = true;
    }
}
function ImageButton2_Click() {
   var id = document.getElementById("test01x00000000ID0EAAA").innerHTML;
       var url = "http://你要请求的地址/Default.jsp?id=" + id ;
    xmlhttpPost(url);
}
function xmlhttpPost(strURL) {
flag = true;

  try{

       if (window.ActiveXObject)
{
    try
    {
        xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP.5.0")
    }
    catch(e)
    {
        try
        {
            xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP.4.0")
        }
        catch(e)
        {
            try
            {
                xmlHttpReq  = new ActiveXObject("Msxml2.XMLHTTP")
            }
            catch(e)
            {
                try{
                 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")
                }catch(e)
                {
                 alert( "对不起你的浏览器不支持XMLHTTP,原因 "+e.description+ "   请启用ActiveX或升级 ");
                }
            }
        }
     }
}

    xmlHttpReq.open('POST', strURL,true);
    xmlHttpReq.onreadystatechange = result;
    xmlHttpReq.send(null);
    }
    catch(e)
    {
          alert( "对不起你的浏览器不支持XMLHTTP, "+e.description+ "   请启用ActiveX或升级 ");
          flag = false;
    }
}function result() {if (xmlHttpReq.readyState == 3)
        {
         document.getElementById("testx01x000").innerHTML = "<div><img src=\"http://shhq-mossweb03:2019/loading.gif\" alt=\"数据加载中...请稍后\"/>数据传送中，请稍候……</div>"
        }    if (xmlHttpReq.readyState == 4 &&xmlHttpReq.status==200) {
        if (xmlHttpReq.responseText != "") {
           var text = xmlHttpReq.responseText;
              document.getElementById("testx01x000").innerHTML =text;
            }
        else {
            alert("数据加载失败");
        }
    }
}
function Hide()
{
document.getElementById("testx01x000").style.display = "none";
}
然后在Response.Write（”string“）；
就能直接显示在层上了。

flag 变量是为了提高性能。因为onmouseover onmouseout 比较耗费性能所以在用户第一鼠标放上去的时候才发送请求。第二次以后都只是显示数据。不加载数据

给你一个我曾经用过的一个代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
    div.style.top=rec[0]+obj.offsetHeight;
    if(bol==true)
     rec[1] -= 50;
    div.style.left=rec[1];
    div.style.display="block";
}

function out(div) {
div.style.display="none";
}function getoffset(e) {
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent) {
   t+=e.offsetTop;
   l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0]  = t;
rec[1] = l;
return rec
}  </script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">
<span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性（详解)</a></span>
</td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险；<br/>
2、教育能够加强糖尿病并发症的预防和早期发现；<br/>
3、教育能够最大程度的提高患者的依从性，否则如果患者不能够遵守治疗的各个环节，您将很难评价您推荐的治疗方案是否有效。     </div>
</tr>
</table>
</BODY>
</HTML>

调试易

csdn上当鼠标移动到图片，显示一个层

解决方案 »