求代码:小图在鼠标经过时显示大图!越简练越好!救命!!

哪位大哥有小图在鼠标经过时显示大图的代码!越简练越好!救命!!

解决方案 »

  1.   

    <img src="google." style="width:100px;height:100px;" 
    onmouseover="this.style.cssText='width:200px;height:200px'"
    onmouseout="this.style.cssText='width:100px;height:100px'"/>
      

  2.   

    写了一小段，IE6sp1，FF2.0测试可用！
    L@_@K
    <!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>
        <title> new document </title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
        <style type="text/css">
    body
    {
        padding: 50px 50px 50px 50px;
    }
    .divImg
    {
        float: left;
    }
    .imgOriginal
    {
        position: absolute;
        float: left;
        display: none;
        background-color: #ffffff;
        border: 1px dotted #ff0000;
    }
        </style>
    </head>
    <body>
        <div class="divImg">
            <img class="imgOriginal" />
            <img src="http://www.google.cn/logos/Logo_25wht.gif" id="imgThumb" onmouseover="showOriginal(this, 'http://www.google.cn/logos/Logo_40wht.gif')" />
        </div>
        <div class="divImg">
            <img class="imgOriginal" />
            <img src="http://logo.baidu.com/img/2006/zengji/show_02.gif" id="imgThumb" onmouseover="showOriginal(this, 'http://www.baidu.com/img/slogo_06chunjie.gif')" />
        </div>
        <script type="text/javascript">
        <!--
    function showOriginal(oElement, sOriginalUrl)
    {
        if (oElement.largeImg == undefined)
        {
            oElement.largeImg = oElement.parentNode.getElementsByTagName("img")[0];
            oElement.largeImg.src = sOriginalUrl;        var thumbWidth = oElement.width;
            var thumbHeight = oElement.height;
            oElement.largeImg.onload = function()
            {
                this.style.marginLeft = -(this.width-thumbWidth)/2 + "px";
                this.style.marginTop = -(this.height-thumbHeight)/2 + "px";
            };
            oElement.largeImg.onmouseout = function()
            {
                this.style.display = "none";
            };
        }
        oElement.largeImg.style.display = "block";
    };    //-->
        </script>
    </body>
    </html>
      

  3.   

    <!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 language="javascript">
    function showPhoto(x){
    var thissrc;
    var strinner;
    if(x==0){
    document.getElementById("thisPhoto").innerHTML='';
    }else{
    thissrc=document.getElementById("p"+x).src;
    strinner="<img width='600' src='" + thissrc + "' /><div><a href='" + thissrc + "' target='_blank'> ZOOM </a> " + "</div>";
    document.getElementById("thisPhoto").innerHTML = strinner;
    }
    }
    </script>
    </head><body>
    <div id="thisPhoto"></div>
    <div class="photoalbum">
      <p><img id="p1" onclick="showPhoto(1)" class="photoText" src="http://zi.csdn.net/12060_2.jpg" width="150" />    </p>
      <p>http://zi.csdn.net/12060_2.jpg</p>
    </div>
    <div class="photoalbum">
      <p><img id="p2" onclick="showPhoto(2)" class="photoText" src="http://zi.csdn.net/100090_.gif" width="150" />    </p>
      <p>http://zi.csdn.net/100090_.gif</p>
    </div>
    <input type="button" onclick="showPhoto(0)" value="close" />
    </body>
    </html>