Tengo undiv es decirimage_preview con una imagen dentro. Hay un cuadro de entrada para obtener el radio del círculo del usuario. Cuando hago clic en un punto de la imagen, necesito un círculo con ese punto como centro y la entrada de radio como radio. El círculo debe estar marcado con un marcador. Losdiv con idhotspot_display funciona como marcador y ladiv circle actúa como el círculo que se mostrará. Ambos están absolutamente posicionados. El marcador tiene como fondo una imagen con la dimensión 24X24.

Cuando hago clic, los clones del marcador y el círculo se hacen y colocan alrededor del punto en el que hice clic. Las posiciones de marcador y círculo se cambian con el clic del mouse (encontrará el enlace de violín al final de esta pregunta).

Puedo capturar la coordenada del punto en el que hago clic conoffset yclientX etc. cuyo código sigue:

HTML: Imagen:

<input type="text" value="0"  class="radius" name="radius"/>

<div id="image_preview">

    <img src="https://i.imgur.com/B7VsSq3.png" alt="background" />



    <div id="hotspot_display"></div>

    <div class="circle" style="background-color: #858585; position: absolute;"></div>

</div><!-- end of id image_preview-->

<div id="hotspot_answer_points">


</div><!-- end of id hotspot_answer_points-->

JS:

   $('#image_preview').bind('click', function (ev) {

                var $div = $(ev.target);
                var $div = $(this);
                var $display =  $('#image_preview').find('#hotspot_display');
                var offset_t = $(this).offset().top - $(window).scrollTop();
                var offset_l = $(this).offset().left - $(window).scrollLeft();

                var left = Math.round( (ev.clientX - offset_l) );
                var top = Math.round( (ev.clientY - offset_t) );

                if(window.console){

                    console.log("left = "+left+" top = "+top);

                }


                var display_clone=$display.clone().show();
                display_clone.css({'top':top+33,'left':left+10,'display':'block'});

});

El código dedisplay_clone.css tiene en su parámetro algunos valores (33 y 10) agregados aleft ytop sin el cual no puedo hacer que el centro del marcador de imagen se asiente solo en la coordenada.

Pregunta 1 Acabo de usar al azar los valores 33 y 10 que se agregarán. ¿Qué cálculo debería hacerse realmente aquí ya que estos números que se agregarán pueden variar si mi código HTML se encuentra dentro de una página HTML compleja?

Pregunta : No puedo hacer que el centro del círculo sea la coordenada en la que hice clic. ¿Cuál debería ser el camino aquí?

Todo el escenario esaqu en un violín.

EDITAR Mi escenario tiene en realidad 2 partes. La situación indicada anteriormente tiene lugar en un área administrativa. En el área de usuario, nuevamente muestro la imagen dentro de unadiv es decirhotspot_user_area. Guardé las coordenadas clicadas en la base de datos desde el área de administración. En el área de usuario I, tengo el HTML:

<div id="hotspot_user_area">

<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />

</div>

Tomo las coordenadas de la base de datos y quiero mostrarlas con marcadores en lahotspot_user_area en la imagen. Supongamos que obtengo la coordenada de DB para estar en la variablex1 yy1; Ahora si uso el siguiente código deRoko C. Buljana respuesta de @, no funcionará:

 $("<div />", {
      "class": "circle",
      css: {
        top: y1,
        left: x1,
        width: r * 2,
        height: r * 2,
      },
      appendTo: $this // append to #image_preview!
    }).

Esto no funciona porque en el panel de administraciónleft ytop propiedades tienen los valoresx yy respectivamente que tienen el siguiente cálculo:

y = ev.pageY - o.top,
x = ev.pageX - o.left;

Entonces, ¿cómo puedo colocar los marcadores en el mismo lugar de la imagen en cualquierdiv la imagen se vuelve a colocar?