Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Id like to create something similar to what you see here... http://www.houzz.com/ideabooks/9424693/list/8-Beautiful-Ways-to-Work-Glass-Into-Your-Kitchen-Cabinets

If you click on the second photo down, youll notice it has a bunch of tags, linking to actual products, or just descriptions of products.

Is this done using HTML5 canvas overlayed onto the photo?
Or what would be the most efficient way to implement this??

I have a list of 1,000,000 products that the user will be able to tag. I wanna link the two, so that as he tags, it saves to a database, and then anyone else viewing his room, can come in and click a link, to go to that product.

Thanks

share|improve this question
    
Could be done with jQuery or similar library, layering html and other images on top of the base image. HTML5 and canvas are not necessary, but another option of course. –  thorsten müller Apr 16 '13 at 7:30
add comment

1 Answer

The Method

Storing the Data

  1. Present the taggable image to the user.
  2. Capture mouse clicks on the image and store the coordinates relative to the image where the user clicks.
  3. 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.
  4. When they save the tag, store the x/y coordinates and relevant information in your database.

Retrieving the Data

  1. The next time the image is loaded, load all of the tags with it.
  2. For each tag, display a <div> on top of the image at the coordinates you saved.
  3. 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.

share|improve this answer
    
Thanks for the nice long post...+1 vote for that. Although I have already solved the problem. I ended up doing the entire thing in canvas. :) –  Kyle Koopman Jun 22 '13 at 0:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.