帮忙给个代码看看！谢谢

图片放在一个div中，然后，给文字做个onmouseover和onmouseout时间当鼠标覆盖文字时候，那个div的display的属性为inline，鼠标离开文字就是none

解决方案 »

  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.   

    <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><br>
      

  3.   

    使用 CSS 就可以了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
      <title>试试</title>
    </head><style type="text/css">
    #txt {
      font-size: 10pt;
      line-height: 15pt;
    }
    p {
      text-indent: 2em; 
    }.word {
      color: #0000cd;
      position: relative;
    }.word img {
      display: none;
      border: 1px solid black;
    }
    .word:hover {
      color: red;
    }
    .word:hover img {
      display: block;
      position: absolute;
      left: 2em;
      top: 1em;
      border: 2px solid #dcdcdc;
      background-color: yellow;
    }
    </style><body>
      <div id="txt">
      <p>五笔字型计算机汉字输入技术
      <span class="word">Google<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"></span>
      计算机汉字输入技术，五笔字型计算机汉字输入技术</p>
      <p>五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术五笔字型计算机汉字输入技
      <span class="word">CSDN<img src="http://www.csdn.net/Images/logo_csdn.gif"></span>
      计算机汉字输入技术，五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术五笔字型计算机汉字输入技术</p>
      </div>
    </body>
    </html>