Enhance your Website Images with Rich Tooltips

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: