Place a label on the image?

I got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the da开发者_开发问答tabase and form something like this dynamically. The problem as I read position ID from the db and would like to place on each of the tyres? Any idea how to achieve it?

---

There are a fews ways to put labels on images in web applications.

1. Make an HTML element like a div or span, whose css background property is an image. You will have to change the css dynmaically if the image is read from a database.
2. Generate a new image by compositing the text and background image server-side (but that is sooooo 1990s!)
3. Generate the whole display using <canvas>

Given what you have already, I would go with option 1.

---

You can put another image with the number on top of the tires. Alternatively, if all the images are the same, you can set the image as a background for the div/li/aand print the number as plain text.

If every picture is different, you can assign every div (or whatever it is) an I'd, and echo custom CSS that sets a different background image for each div.