同志们帮忙看看CSDN上的这个网页效果是怎么实现的？

Question

就是鼠标移动到用户头像上时出现一副框框，里面写着这个用户的帐号，昵称，最新帖子等。我想知道怎么实现这个效果，我想大致的思路应该是鼠标划过头像区域时显示了另外一个图片（我已经用资源查看器查过了，那个框框确实是一副图片），我比较头疼的是这个图片定位是怎么定位的，还有上面的字是怎么定位的。这个是css实现的还是 javascript实现的（如果不考虑字的来源），最好来段代码，我是新手，还望多多包涵。

Answer 1

这划过的时候不是个DIV么，怎么变图片了。整个FIREBUG看看你就知道了。

Answer 2

鼠标 移到  头像上 获取 相对的 位置  
弹出的div 设置offsetLeft,offsetTop值

Answer 3

除了这个以外，因为这个弹出层是在其他层之上，所以必须把它的CSS属性里的z-index:1000，设置得高一点！
其实图就是放在<div>里,<div style="position:absolute;z-index:1000;width:300px;height:300px;"><img src='通过后台获取值'></img></div>,位置由div来控制,让JS去动态设置DIV的位置，就像2#所说的方法！

Answer 4

这个是需要css+js来实现的，提供一种方案：
在头像img后面插入需要鼠标经过显示的图层，设置该图层display：none；（css,这个图层position需要设置absolute），（当然图层上面的数据，应该是从后台获取的js），鼠标经过时，显示该图层（js）

Answer 5

这个是需要css+js来实现的，提供一种方案：
在头像img后面插入需要鼠标经过显示的图层，设置该图层display：none；（css,这个图层position需要设置absolute），（当然图层上面的数据，应该是从后台获取的js），鼠标经过时，显示该图层（js）

Answer 6

<img onmouseover="try{showUserCard(this,'a13849178851')}catch(ex){};" alt="a13849178851用户头像" title="a13849178851用户自定义头像" src="http://avatar.profile.csdn.net/6/7/D/2_a13849178851.jpg">function showUserCard(sender, username) {
    if (!window.loaded) return; // 未加载
    if (!currentUserCard) {
        //if (!panelTopicAdmin) return; 
        currentUserCard = new CsdnUserCard(); //*/
    }
    var point = absolutePoint(sender);
    currentUserCard.owner = sender;
    currentUserCard.show(point.x + 65, point.y, username, sender.src);
    currentUserCard.mouseover = function(e) {
        var element = typeof event != "undefined" ? event.srcElement : e.target;
        var hotCard = false;
        while (element) {
            hotCard = element == currentUserCard.owner || element == currentUserCard.div_card;
            if (hotCard) break;
            element = element.parentNode;
        }
        if (!hotCard) {
            removeEventHandler(document, "mouseover", currentUserCard.mouseover);
            currentUserCard.close();
        }
    }
    addEventHandler(document, "mouseover", currentUserCard.mouseover);
}

Answer 7

/*//
标题:用户资料
设计:ZswangY37
版权:CSDN.NET
版本:2008103101
//*/function CsdnUserCard() {
    this.hot = false;    this.div_card = document.createElement("div");
    with (this.div_card.style) {
        borderStyle = "none";
        borderWidth = "0";
        display = "none";
        width = "357px";
        height = "194px";
        position = "absolute";
        textAlign = "left";
        background = "transparent url(/u/ui/styles/default/topic/bgUserCard.gif) no-repeat scroll 0 0";
        fontFamily = "Verdana,Arial,Helvetica,sans-serif";
    }
    this.div_card.card = this;
    document.body.appendChild(this.div_card);    this.table_card = document.createElement("table");
    with (this.table_card.style) {
        top = "12px";
        left = "56px";
        position = "relative";
        width = "290px";
    }
    this.table_card.cellSpacing = "0";
    this.table_card.cellPadding = "0";
    this.table_card.border = "0";
    this.div_card.appendChild(this.table_card);    this.tr_card = this.table_card.insertRow(-1);
    this.td_left = this.tr_card.insertCell(-1);
    with (this.td_left.style) {
        lineHeight = "170%";
        textAlign = "center";
        verticalAlign = "top";
        width = "80px";
    }
    this.a_face = document.createElement("a");
    this.a_face.target = "_blank";
    this.a_face.title = "进入个人空间";
    this.a_face.style.color = "#01359D";
    this.a_face.target = "_blank";
    this.td_left.appendChild(this.a_face);    this.td_right = this.tr_card.insertCell(-1);
    with (this.td_right.style) {
        lineHeight = "170%";
        textAlign = "left";
        verticalAlign = "top";
    }    this.img_face = document.createElement("img");
    this.a_face.appendChild(this.img_face);
    with (this.img_face.style) {
        border = "1px solid #5B7790";
        width = "70px";
    }    this.br_face = document.createElement("br");
    this.td_left.appendChild(this.br_face);    this.a_space = document.createElement("a");
    this.a_space.innerHTML = "个人空间";
    this.a_space.title = "进入个人空间";
    this.a_space.target = "_blank";
    this.td_left.appendChild(this.a_space);
    with (this.a_space.style) {
        color = "#01359D";
        textDecoration = "none";
        verticalAlign = "middle";
    }    this.br_space = document.createElement("br");
    this.td_left.appendChild(this.br_space);    this.a_addFriend = document.createElement("a");
    this.a_addFriend.target = "_blank";
    this.a_addFriend.title = "加为好友";
    this.td_left.appendChild(this.a_addFriend);    this.img_addFriend = document.createElement("img");
    this.img_addFriend.src = "http://c.csdn.net/bbs/f/i/blank.gif";
    this.a_addFriend.appendChild(this.img_addFriend);    with (this.img_addFriend.style) {
        background = "transparent url(/u/ui/styles/default/topic/addFriend.gif) no-repeat scroll 0 0";
        height = "17px";
        marginBottom = "5px";
        width = "61px";
        border = "medium none";
    }    this.br_addFriend = document.createElement("br");
    this.td_left.appendChild(this.br_addFriend);    /*
    this.a_message = document.createElement("a");
    this.a_message.target = "_blank";
    this.a_message.title = "发消息";
    this.td_left.appendChild(this.a_message);    this.img_message = document.createElement("img");
    this.img_message.src = "http://c.csdn.net/bbs/f/i/blank.gif";
    this.a_message.appendChild(this.img_message);    with (this.img_message.style) {
    background = "transparent url(/u/ui/styles/default/topic/sendIMMsg.gif) no-repeat scroll 0 0";
    height = "17px";
    marginBottom = "5px";
    width = "61px";
    border = "medium none";
    }    this.br_message = document.createElement("br");
    this.td_left.appendChild(this.br_message);
    */    this.a_blog = document.createElement("a");
    this.a_blog.target = "_blank";
    this.a_blog.title = "浏览博客";
    this.td_left.appendChild(this.a_blog);    this.img_blog = document.createElement("img");
    this.img_blog.src = "http://c.csdn.net/bbs/f/i/blank.gif";
    this.a_blog.appendChild(this.img_blog);    with (this.img_blog.style) {
        background = "transparent url(/u/ui/styles/default/topic/goBlog.gif) no-repeat scroll 0 0";
        height = "17px";
        marginBottom = "5px";
        width = "61px";
        border = "medium none";
    }    this.span_username = document.createElement("span");
    this.span_username.innerHTML = "帐号：";
    this.td_right.appendChild(this.span_username);    this.a_username = document.createElement("a");
    with (this.a_username.style) {
        color = "#01359D";
        fontStyle = "normal";
        textDecoration = "none";
    }
    this.td_right.appendChild(this.a_username);    this.br_nickname = document.createElement("br");
    this.td_right.appendChild(this.br_nickname);    this.span_nickname = document.createElement("span");
    this.span_nickname.innerHTML = "昵称：";
    this.td_right.appendChild(this.span_nickname);    this.a_nickname = document.createElement("a");
    this.a_nickname.innerHTML = "载入中...";
    with (this.a_nickname.style) {
        color = "#01359D";
        fontStyle = "normal";
        textDecoration = "none";
    }
    this.td_right.appendChild(this.a_nickname);    this.br_nickname = document.createElement("br");
    this.td_right.appendChild(this.br_nickname);    this.span_topics = document.createElement("span");
    this.span_topics.innerHTML = "最新帖子：";
    this.td_right.appendChild(this.span_topics);    this.br_topics = document.createElement("br");
    this.td_right.appendChild(this.br_topics);    this.ol_topics = document.createElement("ol");
    this.td_right.appendChild(this.ol_topics);    this.li_topics = {};
    this.a_topics = {};
    for (var i = 0; i < 3; i++) {
        this.li_topics[i] = document.createElement("li");
        this.li_topics[i].style.listStyleType = "decimal";
        this.a_topics[i] = document.createElement("a");
        this.a_topics[i].target = "_blank";
        with (this.a_topics[i].style) {
            color = "#01359D";
            textDecoration = "none";
        }
        this.li_topics[i].appendChild(this.a_topics[i]);
        this.li_topics[i].style.display = "none";
        this.ol_topics.appendChild(this.li_topics[i]);
    }    this.a_more = document.createElement("a");
    this.a_more.innerHTML = "更多帖子...";
    this.a_more.title = "浏览更多发帖";
    this.a_more.target = "_blank";
    this.td_right.appendChild(this.a_more);    with (this.a_more.style) {
        marginLeft = "90px";
        color = "#01359D";
        fontStyle = "normal";
        textDecoration = "none";
    }
}CsdnUserCard.prototype.close = function() {
    this.div_card.style.display = "none";
    if (typeof this.onclose == "function") this.onclose(this);
}CsdnUserCard.prototype.show = function(left, top, username, face) {
    this.username = username;
    this.a_face.href = "http://hi.csdn.net/" + username;
    this.a_space.href = "http://hi.csdn.net/" + username;
    this.a_addFriend.href = "http://webim.csdn.net/AddFriends/" + username + ".ashx";
    //this.a_message.href = "http://webim.csdn.net/Messages/" + username + ".ashx";
    this.a_blog.href = "http://blog.csdn.net/" + username;
    this.a_username.href = "http://hi.csdn.net/" + username;
    this.a_nickname.href = "http://hi.csdn.net/" + username;
    this.a_more.href = "http://forum.csdn.net/PointForum/Forum/UserTopicList.aspx?user=" + username;
    var userCard = this;
    if (!CsdnUserCard.userInfos[username]) {
        for (var i = 0; i < 3; i++)
            this.li_topics[i].style.display = "none";
        callScript("http://forum.csdn.net/PointForum/UserCard.ashx?user=" + username, function() {
            userCard.doUserChange(username);
        });
    }
    else this.doUserChange(username);
    this.div_card.style.left = left + "px";
    this.div_card.style.top = top + "px";
    this.div_card.style.display = "";
    this.a_username.innerHTML = username;
    this.img_face.src = face;
}CsdnUserCard.prototype.doUserChange = function(username) {
    if (this.username != username) return;
    if (!CsdnUserCard.userInfos[username]) return;
    this.a_nickname.innerHTML = CsdnUserCard.userInfos[username].nickname;
    for (var i = 0; i < 3; i++) {
        if (CsdnUserCard.userInfos[username].topicList[i]) {
            this.a_topics[i].href = CsdnUserCard.userInfos[username].topicList[i].url;
            var text = CsdnUserCard.userInfos[username].topicList[i].text;
            text = text.replace(/\s&nbsp;\s/g, " ").replace(/&lt;/g, "<").
                replace(/&gt;/g, ">").replace(/&quoted;/g, '"');
            this.a_topics[i].innerHTML = text.match(/^[\s\S]{1,12}/)[0].replace(/[<>" ]/g, function($0) {
                return { "<": "&lt;", ">": "&gt;", " ": "&nbsp;" } [$0];
            });
            /*this.a_topics[i].innerHTML = text.replace(
            /^(.{12})(.*?)$/, "$1…").replace(/@/g, '＠').replace(/&(?![a-z]+;)/g, '＆');*/
            this.a_topics[i].title = text;            this.li_topics[i].style.display = "";
        } else this.li_topics[i].style.display = "none";
    }
}CsdnUserCard.userInfos = {};function UserCardCallback(json) {
    if (typeof json == "undefined" || !json.username) return;
    CsdnUserCard.userInfos[json.username] = json;
}原来是zswang清洁工大师的大作，难道是csdn的员工？
详细参考：
http://topic.csdn.net/u/t5/t5.js

Answer 8

http://hi.csdn.net/zswang

Answer 9

已经说的那么明显了！简单不能再简单了，CSDN只是隐藏了个人信息，然后指向头像再显示而已，而且样式已经控制了它的位置！