Jquery - ajouter une image à des coordonnées spécifiques

Question

Est-il possible d'ajouter une image à une position cliquée dans une div en utilisant jquery?

J'ai besoin de développer un petit jeu consiste essentiellement en cliquant sur l'écran pour deviner une position - une image est placé là où l'utilisateur clique sur ...

Je sais comment obtenir le X & Y coordonnées du lieu qui a été cliqué - mais n'a aucune idée de la façon de placer une image dans cette position ...

Toute aide serait très bien reçue!

Vive Paul

Answer 1

Assurez-vous que le div est réglé sur position: relative puis lorsque vous créez votre image et faire position:absolute définir les propriétés top et left à vos coordonnées de clic. Quelque chose comme ceci:

$('#yourdiv').append( 
    '<img src="/path/to/your/image.jpg" 
    style="width:auto;height:auto;position:absolute; 
      left:' + yourxcoord + ';top:'+ yourycoord +'" />"); 

Answer 2

Vous pouvez vérifier un exemple simple d'ici http://jsfiddle.net/qA2jV/

jquery:

$(document).click(function(e){ 
    $(".foo").remove() 
    $("body").append("<span class='foo'/>") 
    $(".foo").css("left",e.pageX) 
    $(".foo").css("top",e.pageY) 
}) 

css:

.foo{ 
    background-image:url("https://s-static.ak.facebook.com/rsrc.php/v1/ym/r/9vuAQCVid3f.png"); 
    background-repeat:no-repeat; 
    display:inline-block; 
    position:absolute; 
    height:16px; 
    width:16px; 
}