Improve your Website Images with Rich Tooltips

Some parts of this article may not render correctly in your RSS reader. Please click here to read the full version.

Web designers have long used image maps in HTML to link different areas of an image to different web pages. For instance, what you see above is a single image of some well-known people and if you click on any of the faces, you'll be transported to their respective sites.
Larry's image links to his Wikipedia entry, Sergey's face will take you to one of his video lectures on YouTube while Eric's image is linked to his Twitter account. One image but with multiple links and all pointing in different directions. The previous chart, illustrating the most disliked videos on YouTube, also uses an Image Map.

Rich Tooltips - An Alternative to HTML Image Maps

Image Maps are useful and easy to implement but have certain drawbacks.
You don't get any clues about the page that an image area is linking to until you actually click the link. The other downside is that you need to hover your mouse over the full image in order to to identify which parts of that image are clickable.
Now let's try something different. I have embedded the same collage below but instead of using HTML based Image Maps, it uses Thinglink, an online tool  that makes your static web images interactive with rich tooltips. Hover your mouse for a quick demo:

Like an Image Map, you define an area on the image that you would like to link to the other site. In Thinglink's jargon, these are known as hotspots. When users hover on any of these hotspots, they can see the linked content, or portions of it, in the tool tip itself.
If you are linking an hotspot to a YouTube video or an MP3 song, visitors can enjoy the media on the image itself without leaving your page. If the link is pointing to a Wikipedia page, they get to read an excerpt of the page inside the tooltip. If it's a book on Amazon, the thumbnail and price would display in the preview.
There are other interesting uses as well. For instance, you can create an annotated illustration /diagram and users can learn in detail about the different parts of the image by simply hovering the mouse. If you are sharing a route map, you can use these interactive hotspots to explain the route in detail with text and rich-media tooltips.