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.