50分求一段JS

<a href="www.xxx.com/1.jpg>1</a>
<a href="www.xxx.com/2.jpg>2</a>
<a href="www.xxx.com/3.jpg>3</a>
<a href="www.xxx.com/4.jpg>4</a>
就一个JS，
就是当鼠标划这个链接时，把图片显示出来可以高设定高和宽，鼠标离开时隐藏，支持多浏览器，3Q

解决方案 »

  1.   

    可以这样：
    $("#id").hover(function(e){
       document.getElementById('pop'+y).style.display="";
    },
    function(){
       document.getElementById('pop'+y).style.display="none";
    });
      

  2.   

    up用jQuery实现 效果比较好。
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <style type="text/css">
    body a{display:block;width:40px;height:40px;}
    </style>
    </head><body>
    <script language="javascript">function aa(e,src)
    {
    var s = mousePosition(e);
    var div = document.getElementById('div');
    div.style.top = s.y;
    div.style.left = s.x;
    div.style.display='block';
    div.innerHTML="<img src='"+src+"'/>";
    }function mousePosition(ev){
    if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
    }
    return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop - document.body.clientTop
    };} 
    function bb(e)
    {
    document.getElementById('div').style.display='none';
    }
    </script>
    <a href="www.xxx.com/1.jpg" onmouseover="aa(event,'www.xxx.com/1.jpg')" onmouseout="bb()">1</a>&nbsp;
    <a href="www.xxx.com/2.jpg" onmouseover="aa(event,'www.xxx.com/2.jpg')" onmouseout="bb()">2</a>&nbsp;
    <a href="www.xxx.com/3.jpg" onmouseover="aa(event,'www.xxx.com/3.jpg')" onmouseout="bb()">3</a>
    <div id="div" style="display:none;border:1px solid red;width:100px;position:absolute;">sdfsdfsadf<br>dfdsf</div>
    </body>
    </html> 
      

  4.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function(){
    var img = document.createElement("img");
    img.style.cssText = "display:none; position:absolute; width:200px; height:100px; border:1px solid #ddd;";
    document.body.appendChild(img);
    var a = document.getElementById("container").getElementsByTagName("a");
    for(var i = 0; i < a.length; i++){
    a[i].onmouseover = function(oEvent){
    oEvent = oEvent || event;
    img.style.display = "block";
    img.src = this.href;
    img.style.left = oEvent.clientX + 5 + "px";
    img.style.top = oEvent.clientY + 5 + "px";
    };
    a[i].onmouseout = function(){
    img.style.display = "none";
    };
    }
    };
    </script>
    </head><body>
    <div id="container">
      <a href="http://www.baidu.com/img/logo-yy.gif" >baidu1</a>
      <a href="http://www.baidu.com/img/baidu_logo.gif">baidu2</a>
      <a href="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">google1</a>
      <a href="http://images.google.cn/intl/zh-CN_cn/images/logos/images_logo_lg.gif">google2</a>
    </div>
    </body>
    </html>
      

  5.   


    <!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>
    </head><body>
    <a href="www.xxx.com/1.jpg">1 </a> <br /><a href="www.xxx.com/2.jpg">2 </a> <br /><a href="www.xxx.com/3.jpg">3 </a> <br /><a href="www.xxx.com/4.jpg">4 </a> <br /><script type="text/javascript">
    var a=document.body.getElementsByTagName('A');
    for(var i=0,ii=a.length; i<ii; i++){
    a[i].v=i;
    a[a[i].v].onmouseover=function(){
    var img=document.createElement('IMG');
    img.src=this['href'];
    this.appendChild(img);
    }
    a[a[i].v].onmouseout=function(){
    this.removeChild(this.lastChild)
    }
    }
    </script>
    </body>
    </html>
      

  6.   

    function aa(e,src)
    {
        var s = mousePosition(e);
        var div = document.getElementById('div');
        div.style.top = s.y;
        div.style.left = s.x;
        div.style.display='block';
        div.innerHTML="<img src='"+src+"'/>";
    }function mousePosition(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };} 
    function bb(e)
    {
        document.getElementById('div').style.display='none';
    }