Importing the jQuery Library
As with all my examples using jQuery, I link to Google's hosted version. If a user already has the file in their browser cache, it cuts down on another HTTP request thus saving your users time.
Below is all the HTML needed for my image tagging example. I dynamically insert much of the other needed HTML via jQuery. Originally I planned to make this a jQuery plugin. This could still easily be accomplished by taking the code within $(document).ready & adding it into a standard plugin code block.
Unlike many of my other articles, there is a lot more code needed to achieve the desired effect. Because of this I probably won't walk you through line-by-line. Instead I'll give a brief description for some of the main elements in the DOM.
#tag-wrapper - This is wrapped around the IMG element and is given a relative position. This allows us to position other elements absolute.
#tag-target - This is a DIV which boxes in the target which a user has clicked on within the photo.
#tag-input - This is a DIV which contains a label, input box & submit/reset buttons. It is attached to the #tag-target DIV.
.hotspot - Finally after a tag has been assigned, a .hotspot DIV is created and positioned over the desired location on the image.
In the main code block I've liberally added comments to explain each line of code:
Finally, here is a few functions I use for adding/removing tags:
Above & Beyond
I did add a few effects that Facebook does not have. For instance I added fading effects on pretty much everything I could. I often find that adding a fade or slide effect gives applications a more "polished look". I also added an animation if you click a new location for the target tag. Once again, here's a link to the finished product >>