Using JQuery and QTip to Make an Image Map with Tooltips

I’m trying to meet everyone at the office and thought about marking down in an office plan the people already met, what they do, etc. This turned out to be very easy to do with JQuery and QTip. Here’s how:

First of take the image you want to use and head down to this site to produce the image map automatically (that’s one handy tool I tell you):

http://www.maschek.hu/imagemap/imgmap

After that you can use the ‘alt’ attribute to put the tooltip text. The end result looks like this, some of the spaces are still empty so you’ll have to find the ones that aren’t :)

http://tech.morgadinho.org/cowork/

Enjoy!