The Method
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 Technology
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.
The Front-End
HTML and CSS
You can easily render the entire program in HTML and CSS. You may find it useful to use a JavaScript templating library such as Handlebars or Underscore.js and/or a CSS preprocessor framework such as LESS or SASS.
Javascript
There are a lot of different JavaScript frameworks/libraries (jQuery, Backbone and Underscore.js, Ember.js, YUI, etc.). Which one to use is pretty big question by itself and depends on the other things you're trying to achieve with the project. jQuery is one of the more commonly used libraries and should be able to accomplish most of the things you're trying to do. You should research all of them so you understand what you're getting into.
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.
HTML 5
HTML5 could easily handle this, since it's a newer version of older technologies that were already capable of this feat (including JavaScript). It's kind of overkill to do the entire thing in strict HTML5 at this point, and you'll likely be eliminating older browsers from being able to use the site, but it is an option nonetheless. You should definitely research HTML5 before designing the project so you will be able to refactor to it easily if you decide to do so in the future.
The Back-End
Database
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.
Server-Side Code
You will need a server-side component to the application to pull the data from the server and send it back to your front-end client. For this you have quite a few options, including ASP.NET, Ruby, Python, Java, server-side JavaScript, PHP, and more.
More Questions?
For more specific help with any part of this application, you should probably post your question(s) on Stack Overflow.
