0

我不太确定出了什么问题。我已经尝试了一些东西,但我就是无法让它工作。当您将鼠标悬停在链接上时,它应该有一个小图像,但它不起作用。它似乎正确地输出了 HTML

    <html>
    <head>
    <title>JamieHankins.co.uk</title>
    <link rel="stylesheet" href="http://jamiehankins.co.uk/css.css">
    <style type="text/css">
    table.tables td {
        border-width: 4px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    .ddimgtooltip{
    box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 3px 3px 5px #818181;
    -moz-box-shadow: 3px 3px 5px #818181;
    display:none;
    position:absolute;
    border:1px solid black;
    background:white;
    color: black;
    z-index:2000;
    padding: 4px;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    var ddimgtooltip={

        tiparray:function(){
            var tooltips=[]
            <?php
            $count = 0;
            if ($handle = opendir('.')) {
            while (false !== ($entry = readdir($handle))) {
            if ($entry != "." && $entry != "..") {
            $count++;
            echo"
            ";
            echo "tooltips[$count]=['$entry']";
            }
            }
            }
            ?>

            return tooltips
        }(),

        tooltipoffsets: [20, -30],

        tipprefix: 'imgtip',

        createtip:function($, tipid, tipinfo){
            if ($('#'+tipid).length==0){
                return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
                    '<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
                    + ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
                    )
                .css(tipinfo[2] || {})
                .appendTo(document.body)
            }
            return null
        },

        positiontooltip:function($, $tooltip, e){
            var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
            var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
            x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
            y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
            $tooltip.css({left:x, top:y})
        },

        showbox:function($, $tooltip, e){
            $tooltip.show()
            this.positiontooltip($, $tooltip, e)
        },

        hidebox:function($, $tooltip){
            $tooltip.hide()
        },


        init:function(targetselector){
            jQuery(document).ready(function($){
                var tiparray=ddimgtooltip.tiparray
                var $targets=$(targetselector)
                if ($targets.length==0)
                    return
                var tipids=[]
                $targets.each(function(){
                    var $target=$(this)
                    $target.attr('rel').match(/\[(\d+)\]/)
                    var tipsuffix=parseInt(RegExp.$1)
                    var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix 
                    var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
                    $target.mouseenter(function(e){
                        var $tooltip=$("#"+this._tipid)
                        ddimgtooltip.showbox($, $tooltip, e)
                    })
                    $target.mouseleave(function(e){
                        var $tooltip=$("#"+this._tipid)
                        ddimgtooltip.hidebox($, $tooltip)
                    })
                    $target.mousemove(function(e){
                        var $tooltip=$("#"+this._tipid)
                        ddimgtooltip.positiontooltip($, $tooltip, e)
                    })
                    if ($tooltip){
                        $tooltip.mouseenter(function(){
                            ddimgtooltip.hidebox($, $(this))
                        })
                    }
                })

            })
        }
    }

    ddimgtooltip.init("*[rel^=imgtip]")
    </script>
    </head>
    <body>
    <div class="box">
    <span class="title">Screenshot Bin</span>
    <table class="tables">
    <tr>
    <?php
    $COUNT = 0;
    if ($handle = opendir('.')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != ".." && $COUNT % 3 == 0) {
            echo "</tr><tr><td><a href='$entry' rel='imgtip[$COUNT]'>$entry</a></td>";
            $COUNT++;
        }
        else {echo "<td><a href='$entry' rel='imgtip[$COUNT]'>$entry</a></td>";
        $COUNT++;
        }
    }
    closedir($handle);
    }
    ?>
    </tr>
    </table>
    </div>
    <div class="proboxs">
    <a class="social" href="http://jamiehankins.co.uk/">Back</a>
    </div>
    </body>
    </html>
            </body>
            </html>
4

1 回答 1

0

@jamie 您的代码需要包含您应该下载的图像的外部文件。然后你应该设置图像的路径。

于 2012-05-26T12:02:59.443 回答