Positionner les icônes avec les coordonnées x et y au-dessus d'une autre image en utilisant JQuery

Question

J'ai une image, et je veux placer une icône dessus. L'icône a les coordonnées x et y par rapport à la grande image. Comment puis-je les positionner en utilisant jQuery et CSS? Je veux ajouter l'icône à l'image parce que j'ai un lop de nombreuses icônes et je veux les ajouter dynamiquement.

C'est le HTML:

<div class="panel-body" id="image-class"> 
    <img id="map-view" src="/image1.png"> 
</div> 

C'est le CSS:

#map-view { 
    height: 100%; 
    width: 100%; 
    object-fit: contain; 
} 

Merci à l'avance.

Answer 1

Depuis que vous avez fourni très peu d'informations, je suppose votre tableau de fetching icône JSON db via AJAX chaque élément dans le tableau comme { 'image_url': URL_icône 'x': 50, 'y': 10 }
CSS:

#image-class{ 
position:absolute; 
} 

#image-class .icon{ 
position: relative; 
} 

JS:

// list_of_icons is from db via AJAX or somthing 
    for(var i=0;i<count(list_of_icons);i++) 
    { 
     $("<img />").attr('src',list_of_images[i].img_url).addClass('icon').css({top:list_of_images[i].y+'px',left:list_of_images[i].x+'px'}).appendTo("#image-class"); 
    }