如何点击后显示图片？


如何在鼠标点击后，在点击的位置自动显示一个图片？比如：鼠标在屏幕上随意点击，每点击一次则生成一张图片。谢谢！

解决方案 »

  1.   

    只能更改图片路径，不能生成图片
    改图片用innerHTML或是直接修改图片的src值。
      

  2.   

    试试
    <!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>JS获得鼠标位置</title> 
    </head> <body> <script> 
    function mouseMove(ev) {
    ev = ev || window.event;
    var mousePos = mouseCoords(ev); //alert(ev.pageX); 
    var img = document.createElement("img");
    document.body.appendChild(img);
    img.src = "img/22.jpg";
    img.style.position = "absolute";
    img.style.top = mousePos.y + "px";
    img.style.left = mousePos.x + "px";
    document.getElementById("xxx").value = mousePos.x;
    document.getElementById("yyy").value = mousePos.y;
    }
    function mouseCoords(ev) {
    if (ev.pageX || ev.pageY) {
    return {
    x: ev.pageX,
    y: ev.pageY
    };
    }
    return {
    x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
    y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
    };
    }
    document.onclick = mouseMove;</script> 
    鼠标 X 轴: 
    <input id=xxx type=text> 
    鼠标 Y 轴: 
    <input id=yyy type=text> 
    <div id="" style="height:3000px">
    </div>
    </body>