1

How can i insert a value "inside" a picture in html/jquery?? I currently have a GTA server, and i wanted to add something similar as the picture below shows, a clothing shop with numbers in each picture.

example

I have the main script all done(the clothing shop), but i want to insert a number in each picture, so that it can get easier for the player to find the respective clothing. Being more precise, i wanted to insert the 'data-action' value "inside" the picture. Here is a piece of the html, so it can get easier to understand.

html

I've been researching for two days straight, found nothing.. Thanks.

Jacob
  • 77,566
  • 24
  • 149
  • 228
Fernando Marques
  • 11
  • 1
  • Thinking about this all wrong. You can't put anything ***inside*** an image. You can put html on top of an image element though or use the image as background for some html – charlietfl May 10 '20 at 00:18
  • Agreed, that's why i said "inside". Do you have any idea how can i do that? Put the HTML on top of an image? Thanks. – Fernando Marques May 10 '20 at 00:28
  • Open the page you took screenshot of and inspect their html in your browser dev tools element inspector. Will see how they did it – charlietfl May 10 '20 at 00:29
  • Should be easy to find lots of tutorials for content over an image. Suspect you have been trying to search incorrectly for content inside image. Simplest is using wrapping parent container and another div inside it that is position absolute to put other content inside – charlietfl May 10 '20 at 00:37
  • Also inspecting the existing example in browser dev tools will give you a lot of insight – charlietfl May 10 '20 at 00:42
  • That worked, thank you so much! How do i close the topic? – Fernando Marques May 10 '20 at 01:02
  • Not sure what exactly worked but glad you got the basics sorted out – charlietfl May 10 '20 at 01:03
  • This: "Suspect you have been trying to search incorrectly for content inside image." Thanks, even though you didn't gave me the solution for it, you gave me the right tool to find. – Fernando Marques May 10 '20 at 01:08
  • Ahh but isn't it better to teach a man to fish than to just give him a fish? Learning the tools and how to debug is just as critical as learning how to create the code also – charlietfl May 10 '20 at 01:09

2 Answers2

0

Check out SVG (Scalable Vector Graphic): https://developer.mozilla.org/en-US/docs/Web/SVG/Element

You can load the picture as the background and then write whatever you want over it very easily using the <text> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

You can also do it using D3.js as described here: How to center a text on a svg image using d3.js?

Also, everything in the SVG is an HTML element with the normal events—onclick, etc. So you can make them reactive.

Updated

The simplest way would be to use Cascading Style Sheets (CSS). Here is an example: https://www.w3schools.com/howto/howto_css_image_text.asp

It uses a <div> element, but you could just use the same CSS on the <button> instead, if you want.

seanpue
  • 313
  • 1
  • 7
0

Use an HTML5 "canvas". Put the image in the canvas as a "background". Then use canvas tools to draw lines, write text, make circles, etc.

That uses x & y coordinates for placement; getting the right values for those will be the challenge.

Rick James
  • 135,179
  • 13
  • 127
  • 222