ansaurus

Question

Answer 1

A:

You should post your html/structure too but you can go about something like this:

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

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

Sarfraz 2010-07-27 12:33:05

Answer 2

A:

unless you're set on not using any external libraries, I would take a look at jQuery, which can make your life a whole lot easier for this kind of stuff

second 2010-07-27 12:34:41

Answer 3

A:

Sure, the basic flow would be to add an event listener to the onclick event. That event listener would then append the image to some container div.

The key point is the CSS for your images. Make sure that you're absolutely positioning your images and would be a good idea to use an incrementing z-index. You can capture the position values from the onclick event (for all the different values, see: http://www.quirksmode.org/js/events_properties.html#position). You would set these CSS values when you insert the image in javascript.

Nick Canzoneri 2010-07-27 12:38:57

Answer 4

A:

It should be possible. I personally use JQuery which makes these things pretty easy: http://jquery.com

This example should give you an idea of how you would accomplish this:

    <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"&gt;&lt;/script&gt;
        <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>

Ross Peoples 2010-07-27 12:47:34

doesnt seem to be inserting any image? :/ any ideas? Thanks

IceDragon 2010-07-27 15:16:31

ansaurus

tags:

views:

answers:

Insert an image on mouseclick location

related questions