showimage.js

Very good-xuan yen Student Information Management System [Senior Edition].

if(document.all["_showImage"]==null) document.write('<img id=_showImage style="z-index:999; display:none; position:absolute; border:1 solid black" onmouseout="style.display=&quot;none&quot;">');

/**
 * 显示弹出图片。
 * @param tag 目标元素。弹出的框将显示在其旁边
 * @param url 需要弹出的图片的URL
 * @param pos 弹出位置。0=右，1=上，2=左，3=下，缺省为自动选择最佳方位。
 */
function showImage(tag,url,pos) {
    tag.attachEvent("onmouseout",mouseout);

    var helper = document.all["_showImage"];
    helper.removeAttribute("src");
    helper.removeAttribute("width");
    helper.removeAttribute("height");
    helper.onload=showImage_show;
    helper.src = url;

    function mouseout() {
        //if(event.toElement != helper) //注释本行将使鼠标移出原图时弹出图立即关闭
        helper.onmouseout();
        helper.onload = null;
        helper.removeAttribute("src");
        tag.detachEvent("onmouoseout",arguments.callee);
    }

    function showImage_show() {
        var rc = tag.getBoundingClientRect();
        helper.style.display = '';
        var rc2 = helper.getBoundingClientRect();
        helper.alt = (rc2.right-rc2.left)+" x "+(rc2.bottom-rc2.top);

        var body = document.body;

        var l = rc.left;
        var t = rc.top;
        var r = body.clientWidth-rc.right;
        var b = body.clientHeight-rc.bottom;
        var ratio = (rc2.bottom-rc2.top) / (rc2.right-rc2.left);

        var pos = typeof(pos)!='undefined'?pos:-1;
        if(pos >= 0) { //指定了显示方位
            var w = pos==1||pos==3?body.clientWidth : pos==0?r:l;
            var h = pos==0||pos==2?body.clientHeight : pos==1?t:b;
            if(h < w*ratio) w = h/ratio;
            else if(w < h/ratio) h = w*ratio;

        } else { //未指定显示方位，自动选择
            var pos0_2 = l < r ? 0 : 2;
            var pos1_3 = t < b ? 3 : 1;
            var w = l < r ? r : l;
            var h = t < b ? b : t;
            var h1 = w*ratio; if(h1 > body.clientHeight) h1 = body.clientHeight;
            var h2 = body.clientWidth*ratio; if(h2 > h) h2 = h;
            if(h1 > h2) {
                var pos = pos0_2;
                h = h1;
                w = h1 / ratio;
            } else {
                var pos = pos1_3;
                h = h2;
                w = h2 / ratio;
            }
        }

        if(rc2.bottom-rc2.top > h || rc2.right-rc2.left > w) {
            helper.width = w;
            helper.height = h;
        }

        var rc2 = helper.getBoundingClientRect();
        l = (pos==1||pos==3?rc.left:pos==0?rc.right:rc.left-(rc2.right-rc2.left));
        t = (pos==0||pos==2?rc.top:pos==3?rc.bottom:rc.top-(rc2.bottom-rc2.top));
        var k = body.clientWidth-(l+rc2.right-rc2.left);
        if(k < 0) l += k;
        var k = body.clientHeight-(t+rc2.bottom-rc2.top);
        if(k < 0) t += k;

        helper.style.left = -2+body.scrollLeft+l;
        helper.style.top = -2+body.scrollTop+t;
    }

}