Question

我需要在用户点击指定元素（另一个图像）的任何位置插入图像，并使其位于该图像的前面。这可以在javascript中完成吗？如果没有，用什么？

由于

Answer 1

你也应该发布你的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);
};

Answer 2

除非你没有使用任何外部库，否则我会看看jQuery，这可以让你的生活变得更加容易

Answer 3

当然，基本流程是为onclick事件添加一个事件监听器。然后，该事件监听器会将图像附加到某个容器div。

关键是你的图像的CSS。确保您绝对定位您的图片，并且最好使用递增的z-index。您可以从onclick事件中捕获位置值（对于所有不同的值，请参阅：http://www.quirksmode.org/js/events_properties.html#position）。在javascript中插入图像时，可以设置这些CSS值。

Answer 4

应该可以。我个人使用JQuery使这些事情变得非常简单： http://jquery.com

这个例子可以让你了解如何实现这个目标：

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

Answer 5

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

在鼠标单击位置插入图像

5 个答案: