En mi HTML, tengo el elemento img habitual de la siguiente manera:
<img src="images/main/car_48725.png">Quiero poner texto (para ser números más específicos) en esta imagen, para que puedan diferenciar entre varias partes de la imagen (es un automóvil, por lo que un número debe ir en las ruedas, otro en las ventanas, etc., dependiendo de las coordenadas específicas) .
¿Cuál es la forma en que puedo hacer esto? No tengo esta imagen dentro de un lienzo HTML5 ya que no estoy usando Canvas en mi proyecto.
Puede colocar elementos con fondos transparentes encima de la imagen. Esta es solo una forma:
.overlap { position: relative; } .overlap img, .overlap .text { position: absolute; } .overlap .text { color: blue; font-family: sans-serif; } .x { top: 0; left: 0; } .y { top: 10px; left: 10px } .z { top: 20px; left: 20px; } <div class="overlap"> <img src="https://via.placeholder.com/150"> <div class="text x">x</div> <div class="text y">y</div> <div class="text z">z</div> </div> El contenedor div es position: relative , por lo que es un padre compensado para los elementos dentro de él. Luego puede colocar los elementos dentro de él usando left y top (en CSS, o asignando a someElement.style.left y someElement.style.top [recuerde el sufijo px ]).
Más eficiente utilizando el elemento MAP HTML ; basado en este ejemplo de w3schools ¡ Con la ayuda de mapas de imágenes, puede hacerlo de manera más rápida y sencilla!
function clicked(obj){ console.log(obj.title) } <p>Click on the wheels, the door, or the glasses of the car to show title of it!</p> <img src="https://th.bing.com/th/id/OIP.O_8ACkiHyjX-JtYCZnCKDgHaEZ?pid=ImgDet&rs=1" alt="Kevin's_Car" usemap="#image-map"> <map name="image-map"> <area onclick="clicked(this)" alt="front wheel" title="front wheel" href="#" coords="239,230,33" shape="circle"> <area onclick="clicked(this)" alt="back wheel" title="back wheel" href="#" coords="411,169,30" shape="circle"> <area onclick="clicked(this)" alt="door" title="door" href="#" coords="306,134,380,188" shape="rect"> <area onclick="clicked(this)" alt="glass" title="glass" href="#" coords="244,88,280,92,313,98,291,138,215,122,177,107,213,82" shape="poly"> </map>Puedes poner el <img src="images/main/car_48725.png"> dentro de un <div> y luego crear una etiqueta como hijo del <div> y jugar con la posición de la etiqueta y eso es todo.