30分求一弹窗功能

[j_hunter]

想实现一个功能，大体和csdn上鼠标移到人头像上显示他的所有信息一样 只不过我只显示一个图片（原本显示的图片是一个小图，现在要实现把鼠标移动到小图上面后显示相对应的大图，大小图都是读取的）就可以了， 原来是用荧光做的，考虑到装机量的问题 现在就想用js来做，但昨天弄了下没弄的来，主要就是不知道把从数据库读到的图片地址传给js里面去加载大图， 有做过这个功能的说下是怎么做的，或者给个链接也行。 先谢过了！

[guohouchang]

url换成你要请求的路径
然后在页面上response.write（）；
就可以了。也可以返回XML
返回XML的话xmlHttpReq.responseText 改成xmlHttpReq.responseXML

var flag = false;

var xmlHttpReq = false;
var x = 0;
var y =0;
function ImageButton1_Click(ev) {
	if(flag)
	{
		x = ev.clientX;
		y = ev.clientY;
		document.getElementById("testx01x000").style.top = y;
	    document.getElementById("testx01x000").style.left = x+60;
	    document.getElementById("testx01x000").style.display = "";
    }else
    {
    	x = ev.clientX;
		y = ev.clientY;
		document.getElementById("testx01x000").style.top = y;
	    document.getElementById("testx01x000").style.left = x+60;
	    document.getElementById("testx01x000").style.display = "";
		ImageButton2_Click();
    }
}

function ImageButton2_Click() {
	   var id = document.getElementById("test01x00000000").innerHTML;
       var url = "url()?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=\"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()
		{
			//xmlHttpReq.abort();
			document.getElementById("testx01x000").style.display = "none";
		}

[j_hunter]

这里url是个文件的物理地址啊，而且图片没有id，只能根据图片名去判断。 不知道该怎么弄了，你代码都写到这地步了，应该离完整的代码不远了吧 能否写个出来。 我还是没看的太懂你这个 再看看

[hugocross]

来学习。。。

[手写]

鼠标放上：绘出窗口（层）， ajax读取数据，将数据（图片地址）加载到层中的图片上
鼠标移开：删除窗口

[j_hunter]

[Quote=引用 1 楼 zowell 的回复:]
鼠标放上：绘出窗口（层）， ajax读取数据，将数据（图片地址）加载到层中的图片上
鼠标移开：删除窗口
[/Quote]

有示例没啊？对js不是太懂

[斯洛文尼亚旅游]

As+lightbox+js实现实时加载图片进度

效果看这里

[guohouchang]

<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>	

function ImageButton1_Click(ev) {
		x = ev.clientX;
		y = ev.clientY;
	    document.getElementById("testx01x000").style.top = y;
	    document.getElementById("testx01x000").style.left = x+60;
	    document.getElementById("testx01x000").style.display = "";
    }

function Hide()
	{
		document.getElementById("testx01x000").style.display = "none";
	}

[guohouchang]

CSDN不是弹窗。是显示一个DIV。这个DIV事先就放在页面里。当用户鼠标放上去的时候就显示出来。移开的话就隐藏。 上面代码直接运行即实现

[j_hunter]

是的 我要的就是这样的效果 你给的示例我运行看了下 基本功能就应该像你做的那样。这种实现起来是没问题的， 现在是数据绑定的问题，因为大小图片都是读取的 我不知道该如果动态绑定？ 能否再具体点呢？