Storing the Data
- Present the taggable image to the user.
- Capture mouse clicks on the image and store the coordinates relative to the image where the user clicks.
- Once they've clicked, you can present the user with a pop-up/modal type form where they can select one of the products from a searchable list and enter any other information you want to save with the tag.
- When they save the tag, store the x/y coordinates and relevant information in your database.
Retrieving the Data
- The next time the image is loaded, load all of the tags with it.
- For each tag, display a
<div> on top of the image at the coordinates you saved.
- Display a tooltip or notification when the user clicks on a tag. This could include a link to the aforementioned product.
The number of different configurations of technology you could create this project with is enormous. Before you settle on any single technology, you should do some research on all of them.
HTML and CSS
To store the data, you'll make an AJAX call to pass the information to a program on the server.
If you want to automatically send tags to other people viewing the same image, you can look at using something like Comet. There should be plugins or baseline Comet support for most or all of those libraries.
You will need a database of some sort to store your list. If you don't already have one you should look at PostgreSQL or MySQL. There's also the Oracle Database and Microsoft SQL Server to consider if you're doing this professionally for a client who can afford the extra licenses and hosting costs.
For more specific help with any part of this application, you should probably post your question(s) on Stack Overflow.