csdn论坛头像上面的特效是怎么做的

在头像上定义一个事件，鼠标移上的时候弹个div，

解决方案 »

  1.   

    也可以是添加和删除
    <style type="text/css">
    .f{
    cursor:pointer;
    position:absolute;
    width:357px;
    height:194px;
    padding:15px 0 0 50px;
    background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)
    }
    </style>
    <script>
    var oo = true
    function create(){
    if(oo==true){
    oo=false
    var div =document.createElement("div")
    div.className="f"
    div.id="div"
    div.innerHTML="<a href='#'>大法师</a><br>山丘之王<br>血法师<br>怕拉丁"
    document.body.appendChild(div)
    document.getElementById("div").style.left=document.getElementById("text").offsetLeft+30
    document.getElementById("div").style.top=document.getElementById("text").offsetTop
    div.onmouseout=del
    }}function del(e){
    e=e||event;
    var obj=e.relatedTarget||e.toElement;
    var div =document.getElementById("div")
    if(div.contains(obj))return;
    document.body.removeChild(div)
    oo=true
    }</script>
    <span  id="text" onmouseover="create()" style="cursor:pointer;" onMouseOut="del()" >人族</span>
      

  2.   

    <script language="JavaScript" >
        function onit(){
         //alert("1232");
         var nodeDiv = document.createElement("div");
         nodeDiv.style.position = "absolute";
         nodeDiv.id="newDiv";
              nodeDiv.style.backgroundImage="url(images/a.jpg)";
              nodeDiv.style.width = "345px";
              nodeDiv.style.height = "220px";
              nodeDiv.style.top = "24%";
              nodeDiv.style.left = "18%";
              nodeDiv.style.filter = "alpha(opacity=90)";
              nodeDiv.style.opacity = 0.9;
              nodeDiv.style.fontSize = "12px";
              nodeDiv.onmouseout = unonit;
              nodeDiv.style.paddingBottom = "10px";
              nodeDiv.style.paddingLeft = "30px";
              nodeDiv.style.paddingTop = "20px";
              nodeDiv.style.paddingRight = "25px";
              nodeDiv.style.lineHeight = "23px";
              nodeDiv.innerHTML = "<b>汉武帝刘彻</b>（公元前156年~公元前87年），"
              +"汉族，出生于长安，幼名刘彘，是汉朝的第五代皇帝。汉武帝是汉景帝刘启的第十个儿子、汉文帝刘恒的孙子、"
              +"汉高祖刘邦的曾孙，其母是皇后王娡。7岁时被册立为太子，16岁登基，在位五十四年，建立了西汉王朝最辉煌的功业之一。"
              +"《谥法》说“威强睿德曰武”，就是说威严，坚强，明智，仁德叫武。他的雄才大略、文治武功使汉朝成为当时世界"
              +"上最强大的国家，他也因此成为了中国历史上伟大的皇帝。"
              +"汉武帝创立年号同时也是中国第一个使用年号的皇帝。他登基之初，继续他父亲生前推行的养生息民政策......<a href='celeb.html' target='_blank'>&gt;&gt;详细</a>";
              document.body.appendChild(nodeDiv);
        
        }
        function unonit(){
             var node = document.getElementById("newDiv"); 
             document.body.removeChild(node);
          
        }  
        
     </script>
    <link href="css/blogstyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="blog-top"><img src="images/index.jpg" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="105,119,260,143" href="celeb.html" target="_blank"  />
      <area shape="rect" coords="369,120,940,144" href="history.html" target="_blank" />
      <area shape="rect" coords="4,101,99,213" href="#" onmouseover="onit();"/></map></div>
    <div class="bottom"></div>
    </body>
    </html>
    以上是我的代码，但是鼠标移到层时不能点击链接，大家帮我看看问题在哪里？？？
      

  3.   

    你看下/u/ui/scripts/Csdn/Forum/UserOnline1.js的文件