请教一个js的实现效果的问题

我想实现如下地址的效果：
http://www.lanrentuku.com/js/picture-104.html在实现过程中有些疑问：
如果我想从数据库中动态读出一些图片，然后对于每个图片都实现上述效果，是否要想例子中的代码一样对每张图片分配一个层和一个独立的<script>脚本？
请教高手是否有更通用的方法实现上述例子中的效果？谢谢！

解决方案 »

  1.   

    请教楼上的高手，如果我有许多图片，想放在页面的一个<table>里，分行显示
    怎么放在一个<div>里面？
      

  2.   

    <style>
    #otbl {
        border: 1px solid #8F8F8F;
        border-collapse: collapse;
    }
    #otbl td {
        border: 1px solid #8F8F8F;
        width: 60px;
        height: 30px;
    }
    #odiv {
        width:400px;
        height:400px;
        border: 2px solid #D0D0D0;
        background-color:#fff;
        position:absolute;
        display:none;
    }</style>
    <script type="text/javascript">
    <!--
     var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
     var CancelBubble = function(e){
        var e = e || window.event;
        try{
            e.cancelBubble = true;
        }catch(ex){
            try{
                e.stopPropagation();
            }catch(e){}
        }
     } var getTarget = function(e){
        return e.srcElement || e.target;
     } var absPosition = function(element){
        var iTop = iLeft = 0;
        do{
            iTop += element.offsetTop;
            iLeft += element.offsetLeft;
        }while(element = element.offsetParent);
        return {'x': iLeft, 'y': iTop};
     }
     function showTip(e, obj){
            CancelBubble(e);
            var e = e || window.event
            var otarget = getTarget(e);
            $("odiv").style.display = "block";        with($("odiv").style){
                display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
            }
            $("odiv").innerHTML = "<img style='width:100%;height:100%' src="+obj.childNodes[0].src+"/>";
            document.onmouseover = function(){
                $("odiv").style.display = "none";
                document.onmouseover = null;
            }
            $("odiv").onmouseover = function(e){
                var e = e || window.event;
                CancelBubble(e);
            } }
    //-->
    </script><table id="otbl">
            <tr>
                <td onmouseover="showTip(event, this)"><img src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg"/ ></td>
                <td onmouseover="showTip(event, this)"><img src="http://t3.baidu.com/it/u=2700392042,1223912583&fm=3&gp=39.jpg"/></td>
            </tr>
            <tr>
                <td onmouseover="showTip(event, this)"><img src="http://t2.baidu.com/it/u=1539206827,3891660019&fm=0&gp=-32.jpg"/></td>
                <td onmouseover="showTip(event, this)"><img src="http://t2.baidu.com/it/u=2458594631,1970653059&fm=3&gp=47.jpg"/></td>
            </tr>
            <tr>
                <td onmouseover="showTip(event, this)"><img src="http://t3.baidu.com/it/u=91939756,115656241&fm=0&gp=18.jpg"/></td>
                <td onmouseover="showTip(event, this)"><img src="http://t1.baidu.com/it/u=74550891,2550999330&fm=3&gp=29.jpg"/></td>
            </tr>
    </table><div id="odiv"></div>
      

  3.   

    我试了一下，发现有点问题。就是如果我的页面结构是：
    <table id="main">
    <tr>
    <td>
    <table id="otbl">
            <tr>
                <td onmouseover="showTip(event, this)"><img src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg"/ ></td>
                <td onmouseover="showTip(event, this)"><img src="http://t3.baidu.com/it/u=2700392042,1223912583&fm=3&gp=39.jpg"/></td>
            </tr>
            <tr>
                <td onmouseover="showTip(event, this)"><img src="http://t2.baidu.com/it/u=1539206827,3891660019&fm=0&gp=-32.jpg"/></td>
                <td onmouseover="showTip(event, this)"><img src="http://t2.baidu.com/it/u=2458594631,1970653059&fm=3&gp=47.jpg"/></td>
            </tr>
            <tr>
                <td onmouseover="showTip(event, this)"><img src="http://t3.baidu.com/it/u=91939756,115656241&fm=0&gp=18.jpg"/></td>
                <td onmouseover="showTip(event, this)"><img src="http://t1.baidu.com/it/u=74550891,2550999330&fm=3&gp=29.jpg"/></td>
            </tr>
    </table></td>
    </tr></table>如上面的结构，是否js的脚本就要做修改了，否则运行时系统报错说找不到对象
      

  4.   

    你就不能在你的网页里加个DIV？
    <div id="odiv"></div>
      

  5.   

    我加了   但是报错好像不是odiv的问题
      

  6.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #otbl {
        border: 1px solid #8F8F8F;
        border-collapse: collapse;
    }
    #otbl td {
        border: 1px solid #8F8F8F;
        width: 60px;
        height: 30px;
    }
    #odiv {
        width:400px;
        height:400px;
        border: 2px solid #D0D0D0;
        background-color:#fff;
        position:absolute;
        display:none;
    }</style>
    <script type="text/javascript">
    <!--
     var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
     var CancelBubble = function(e){
        var e = e || window.event;
        try{
            e.cancelBubble = true;
        }catch(ex){
            try{
                e.stopPropagation();
            }catch(e){}
        }
     } var getTarget = function(e){
        return e.srcElement || e.target;
     } var absPosition = function(element){
        var iTop = iLeft = 0;
        do{
            iTop += element.offsetTop;
            iLeft += element.offsetLeft;
        }while(element = element.offsetParent);
        return {'x': iLeft, 'y': iTop};
     }
     function showTip(e, obj){
            CancelBubble(e);
            var e = e || window.event
            var otarget = getTarget(e);
            $("odiv").style.display = "block";        with($("odiv").style){
                display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
            }
            $("odiv").innerHTML = "<img style='width:100%;height:100%' src="+obj.childNodes[0].src+"/>";
            document.onmouseover = function(){
                $("odiv").style.display = "none";
                document.onmouseover = null;
            }
            $("odiv").onmouseover = function(e){
                var e = e || window.event;
                CancelBubble(e);
            } }
    //-->
    </script>
    </head>
    <body>
    <table id="main">
    <tr>
    <td>
    <table id="otbl">
            <tr>
                <td onmouseover="showTip(event, this)"> <img src="http://t3.baidu.com/it/u=818127432,806306651&fm=0&gp=8.jpg"/ > </td>
                <td onmouseover="showTip(event, this)"> <img src="http://t3.baidu.com/it/u=2700392042,1223912583&fm=3&gp=39.jpg"/> </td>
            </tr>
            <tr>
                <td onmouseover="showTip(event, this)"> <img src="http://t2.baidu.com/it/u=1539206827,3891660019&fm=0&gp=-32.jpg"/> </td>
                <td onmouseover="showTip(event, this)"> <img src="http://t2.baidu.com/it/u=2458594631,1970653059&fm=3&gp=47.jpg"/> </td>
            </tr>
            <tr>
                <td onmouseover="showTip(event, this)"> <img src="http://t3.baidu.com/it/u=91939756,115656241&fm=0&gp=18.jpg"/> </td>
                <td onmouseover="showTip(event, this)"> <img src="http://t1.baidu.com/it/u=74550891,2550999330&fm=3&gp=29.jpg"/> </td>
            </tr>
    </table></td>
    </tr></table> <div id="odiv"></div>
    </body>
    </html>
      

  7.   

    恩  按照你的代码试了  没错了另外这个代码还有一个地方我不是很明白 就是
    $("odiv").innerHTML = "<img style='width:100%;height:100%' src="+obj.childNodes[0].src+"/>";
    这行中的obj.childNodes[0]指的是什么？
      

  8.   

     <td onmouseover="showTip(event, this)">
    obj就是参数传进来的this 即td对象 childNodes[0]就是td的第一个子元素img 让它的src=你移上图片的src
      

  9.   

    obj就等于当前的td
    <td onmouseover="showTip(event, this)"> 第二个参数this 就代表obj,就是<td>标签自己obj.childNodes[0]表示<td></td>标签里第一个标签,就是指img标签