Friday, July 17, 2009

How to add Flickr like mouseover notes on your blog images

Flickr has a very useful feature called Photo Notes that allow users to add text notes to specific regions on their images. If you move the mouse over these regions, the note is displayed. (See live example). Photo notes are very useful in tagging photos that has more than one story to tell. A common example is group photos, where photo notes are used to identify different persons in the photo.

flickr-photonotes

Taggify is a web widget which allows bloggers and publishers to add such Flickr like photo notes to images on their site. Using Taggify you can define multiple regions on your photos and tag them with some title, description, link or another photo. When a visitor hovers the mouse over the tagged region, a tooltip pops up displaying the information.

Adding Taggify to your blog involves two steps.

The first step is to configure the colors of the tooltip box, the border, transparency etc and generate a JavaScript code based on your customization. The Javascript code goes to the template of your blog.

The second step is the add the Taggify Editor bookmarklet to your browser. This bookmarklet adds online note editing for images on your blog. You blog is now set to use Taggify.

taggify

To create a photo note, click on the saved bookmarklet and login to your Taggify account (oh! I forgot to mention that you will need to register at Taggify to use this service.) Draw rectangles on your photo with the mouse and add the notes. You can use some HTML tags like <i>, <a>, <b>, <u>, <font> and <img>. Also you can specify the URL that visitor will be redirected to (in a new window) when click on the region.

Watch the demo.

0 comments:

Post a Comment

Popular Posts