Create a new element on the fly

I have a img element. When the user hovers over it, I want to create a new div near the mouse with the same image insi开发者_运维百科de the div - something like a preview. I do not want to use a existing plug-in. Is there a simple way to achieve it?

---

You say you do not want to re-use an existing plugin - may I ask why?

I believe this thumbnail plugin will take care of exactly what you are after. The code required to implement this gets reduced to:

<script>
$("img").thumbPopup({
  imgSmallFlag: "_s",
  imgLargeFlag: "_l"
});
</script>

---

I agree with you, you really don't need plugins for everything. Waht you're trying to accomplish is very simple:

Just have an absolute positioned div with an image inside loaded with the page html. Give them spcific ids, then, if you're using the exact same files for the thumbnails and the previews you can try something like:

$('.thumbnails_class').mousemove(function(e) {
    $('#preview_div').css({top: e.pageY, left: e.pageY});
    $('#preview_img').attr('src', $(this).attr('src'));
});

I hadn't tested the code, but i guess it will work just fine. If you're not using the same images for both the thumbnails and the previews, you can still use a similar technique, just use the src attribute of the thumbnail to create the preview src:

$('.thumbnails_class').mousemove(function(e) {
    $('#preview_div').css({top: e.pageY, left: e.pageY});
    $('#preview_img').attr('src', $(this).attr('src').replace(/thumb/, 'preview'));
});

In this example i replace the word thumb by preview in the filenames.

Finally, you need to show/hide the preview:

$('.thumbnails_class').mouseover(function() {
   $('#preview_div').show();
});

$('.thumbnails_class').mouseout(function() {
   $('#preview_div').hide();
});

And that's it. Make the necessary adjustements and you're good to go.

---

Check this Blog post (2nd example)

Image Preview using jQuery

Working example

Then just check out the CSS and an JS he used in that example (hint: sourcecode).

Can't get much easier then this