求一段js，我页面上显示一个图片的名字，aaa.jpg,我鼠标移到aaa.jpg文字上就弹出一个框来显示这张图，鼠标移走就消失，哪位高手有给我下，谢了

求一段js，我页面上显示一个图片的名字，aaa.jpg,我鼠标移到aaa.jpg文字上就弹出一个框来显示这张图，鼠标移走就消失

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
            var path = './'
            function show(obj) {
                var name = obj.innerText;
                var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
                if (!sDiv) {
                    sDiv = document.createElement("DIV");
    sDiv.id = 'img_' + name.split('.')[0];
                    sDiv.style.position = 'absolute';
                    sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
                    sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
    sDiv.style.border = '1px red solid';
                    var img = document.createElement("img");
                    img.src = path + name;
                    sDiv.appendChild(img);
                    document.body.appendChild(sDiv);
                }
                sDiv.style.display = 'block';
            }
            function f(obj) {
                var name = obj.innerText;
                var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
                if (sDiv) {
                    sDiv.style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
    <div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
        aaa.jpg
    </div>
    </body>
    </html>CSS自己写吧。
      

  2.   

    重发一下：这样好看点<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
            var path = './'
            function show(obj) {
                var name = obj.innerText;
                var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
                if (!sDiv) {
                    sDiv = document.createElement("DIV");
    sDiv.id = 'img_' + name.split('.')[0];
                    sDiv.style.position = 'absolute';
                    sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
                    sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
    sDiv.style.border = '1px red solid';
                    var img = document.createElement("img");
                    img.src = path + name;
                    sDiv.appendChild(img);
                    document.body.appendChild(sDiv);
                }
                sDiv.style.display = 'block';
            }
            function f(obj) {
                var name = obj.innerText;
                var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判断
                if (sDiv) {
                    sDiv.style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
    <div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
        aaa.jpg
    </div>
    </body>
    </html>
      

  3.   

    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery.dimensions.js"></script>
    <script src="scripts/jquery.tooltip.js"></script>
    <script type="text/javascript">
    $(function() {
     $(′img.preview′).tooltip({showURL:false,fade:true,delay:250,left:5,top:5,
      bodyHandler: function() {
      str = "<img width=′400′ src=′" + this.src + "′ />";
      if( this.tooltipText )
       str += "<span>" + this.tooltipText + "</span>";
         return $(str);
       }
     });
    });
    </script>用jquery 做的所有class="preview"的图片鼠标经过会显示宽度400的放大图片提示。演示参看 http://www.fish-soso.com相关文件下载
      

  4.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>caiying2009</title>
    <script language="javascript">
    <!--
    onload=function(){
    var obj=document.getElementById("QQ_FACE_ICON").getElementsByTagName("a"),j=obj.length;
    for (var i=0;i<j;i++){
    if (obj[i].name=="QQ_FACE_ICON"){
    obj[i].onmouseover=function(){show(this)}
    obj[i].onmouseout=function(){hid()}
    }
    }
    }function show(_this){
    if(!document.getElementById("pop"))createPop()
    var p = getposition(_this);
    with (document.getElementById("pop")){
    style.top = p['y'] + 'px'
    style.left = p['x']+_this.offsetWidth +10+ 'px'
    style.display = '';
    }
    document.getElementById("pop_img").src=_this.href
    }function hid(){
    document.getElementById("pop").style.display = 'none';
    }function getposition(obj) {//获取对象位置(top/left坐标)
    var r = new Array();
    r['x'] = obj.offsetLeft;
    r['y'] = obj.offsetTop;
    while(obj = obj.offsetParent) {
    r['x'] += obj.offsetLeft;
    r['y'] += obj.offsetTop;
    }
    return r;
    }function createPop() {
    var Div = document.createElement("DIV");
    Div.id = 'pop';
    Div.style.position = 'absolute';
    Div.style.border = '1px red solid';
    var img = document.createElement("img");
    img.id = 'pop_img';
    Div.appendChild(img);
    document.body.appendChild(Div);
    Div.style.display = 'none';
    }//-->
    </script>
    </head>
    <body>
    <div id="QQ_FACE_ICON">
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Crazy.png" title="QQ_FACE_ICON" name="QQ_FACE_ICON">Crazy.png</a><br>
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Embarrassed.png" title="QQ_FACE_ICON" name="QQ_FACE_ICON">Embarrassed.png</a><br>
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Huh!.png" title="QQ_FACE_ICON" name="QQ_FACE_ICON">Huh!.png</a><br>
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Love.png" title="QQ_FACE_ICON" name="QQ_FACE_ICON">Love.png</a><br><br>

    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Crazy.png" title="QQ_FACE_ICON">Crazy.png</a><br>
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Embarrassed.png" title="QQ_FACE_ICON">Embarrassed.png</a><br>
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Huh!.png" title="QQ_FACE_ICON">Huh!.png</a><br>
    <a href="http://tucoo.com/icon/Yazoo%20smilies/s/Love.png" title="QQ_FACE_ICON">Love.png</a><br><br>
    </div>
    </body>
    </html>
      

  5.   

    javascript方法：<script language="javascript">
      function over(picPath){
       x = event.clientX;
       y = event.clientY;      
       document.all.tip.style.display = "block";
       document.all.tip.style.top = y;
       document.all.tip.style.left = x+10;
       document.all.photo.src = ".."+picPath; 
      }
      function out(){
       document.all.tip.style.display = "none";
      }  
     </script>  用法：<div onmouseover = "over('images/aaa.jpg')" onmouseout = "out()" style="cursor:hand;">
        查看图片(aaa.jpg)
    </div>  ${row.picture}为aaa.jpg的路劲