Javascript 在鼠标单击位置上插入图像_Javascript_Html_Image_Insert

Javascript 在鼠标单击位置上插入图像

javascript html image

Javascript 在鼠标单击位置上插入图像,javascript,html,image,insert,Javascript,Html,Image,Insert,我需要在用户单击指定元素的任何位置插入一个图像，然后插入另一个图像，使其位于该图像的前面。这可以用javascript实现吗？如果没有，用什么谢谢你也应该发布你的html/结构，但你可以这样做： var el = document.getElementById('image_id'); var img = document.getElementById('image_id2'); var container = document.getElementById('container_id');

我需要在用户单击指定元素的任何位置插入一个图像，然后插入另一个图像，使其位于该图像的前面。这可以用javascript实现吗？如果没有，用什么

谢谢

你也应该发布你的html/结构，但你可以这样做：

var el = document.getElementById('image_id');
var img = document.getElementById('image_id2');
var container = document.getElementById('container_id');

el.onclick = function(){
  container.appendChild(img);
};

除非你决定不使用任何外部库，否则我会看一看，这可以让你的生活更容易使用这种东西。当然，基本流程是向onclick事件添加一个事件监听器。然后，该事件侦听器将图像附加到某个容器div

关键是图像的CSS。确保你绝对定位你的图像，最好使用递增的z索引。您可以从onclick事件中捕获所有不同值的位置值，请参阅：。您可以在javascript中插入图像时设置这些CSS值。

这应该是可能的。我个人使用JQuery使这些事情变得非常简单：

此示例应让您了解如何实现此目标：

    <html>
    <head>
        <title>My Page></title>
        <style type="text/css">
            .overlay {
                position: absolute;
                z-index: 500;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $("#clickable-image").click(function() {
               var position = $(this).offset();
               $("#overlay-image").offset(position).show();
            });
        </script>
    </head>
    <body>
        <img id="clickable-image" src="path/to/image" />

        <div id="overlay-image" class="overlay" style="display: none;">
            <img src="path/to/overlay/image" />
        </div>
    </body>
</html>

确保在img src位置指定了图像…

似乎没有插入任何图像？：/有什么想法吗？谢谢