鼠标移动到图片上显示另外一幅图需要怎么做？

http://war3.byr.edu.cn/dota/player.html#name=mr_charming
就像这网页内，移动到英雄头像有英雄的相关信息出现。需要怎么做？需要使用哪方面的技术？
我只会html+css，不会javascript。。

解决方案 »

  1.   

    用javascript生成一个层，然后把相关的html元素(图)加进去
      

  2.   

    var tipDiv=document.createElement('div')
    然后控制div的样式和innerHTML就行了
      

  3.   

    就是一个鼠标移入移出然后显示对应的层就行了onmouseover鼠标移入
    onmouseout鼠标移出然后让对应的层  document.getElementById('要显示的层ID').style.display = 'block';隐藏用document.getElementById('要隐藏的层ID').style.display = 'none';
      

  4.   

    楼主会css就很简单了啊。。
    只要用js构造出一个div层，然后显示就可以了，那个div要绝对定位，脱离文档流
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    *{margin:0; padding:0;}
    </style>
    </head>
    <body>
        <img id="tu" src="这里写图片地址" alt="我是图片" width="100" height="100" />
        <div id="div" style="display:none; width:100px; height:100px; border:1px solid #000">我是显示出来的层</div>
        
        <script>
         var tu = document.getElementById('tu'),
    div = document.getElementById('div');

    tu.onmouseover = function(){
    div.style.display = 'block';
    };

    tu.onmouseout = function(){
    div.style.display = 'none';
    };
        </script>
    </body>
    </html>
      

  6.   

    [Quote=引用 3 楼 mubeibei 的回复:]就是一个鼠标移入移出然后显示对应的层就行了onmouseover鼠标移入
    onmouseout鼠标移出然后让对应的层  document.getElementById('要显示的层ID').style.display = 'block';隐藏用document.getElementById('要隐藏的层ID').style.display = 'none';
    [/Quote］3楼的方法可行，当你点击图片时，换一张图片是最简单的方法，这里你需要做一张比之前大一点的图片，当鼠标移到图片上时更换图片即可。而当移出时，你设置onmouseout的属性值为空即可。很简单的。
      

  7.   

    一个绝对定位的DIV 。可以用AJAX去后台取数据也 。
      

  8.   

    在图像旁边放置一个div, 然后设置一个鼠标事件，当鼠标移动到图片时，将div中的innerHTML内容设置为图片的说明