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.

Best Web Designing Points

You might have a complete business model and the perfect plan. But business can’t run without a website. However, designing a website can be a Herculean task!


Here are some of the best web design practices that can make your website unique from all the others. Make sure to keep it subtle, witty and captivating at the same time for the visitors.

25 Best Web Design Practices:

1. First and foremost make sure your website displays properly on the popular versions of IE(7+), Firefox(3+), Opera(9+), Safari(Mac and Windows) to provide tousle free access.
2. Navigation links should be clearly and consistently labeled. Make use of navigation aids such as site map, skip navigation link etc.

3. Use various keywords, phrases and unique titles for each page of your site. Make key ideas on page in bold text font.
4. Your contact information should be prominent and should have all the details like contact name, email address, contact numbers and address information is possible. Also include contact link in the footer.
5. The header/logo should grab the attention of the visitors. It should be consistent. The purpose should be immediately apparent.
6. Content presentation is very important. It should be informative and meaningful. Make it presentable and not in haphazard manner. Content should provide links to other useful sites also.
7. Please no outdated information, no grammatical or spelling errors! Always spell check and proof-read your documents.
8. Page layout is very important. Make good use of design principals like repetition, contrast, proximity and alignment. It should display without horizontal scrolling at 1024*768 and higher resolutions.
9. Don’t forget to optimize website for search engines. Besides a great design websites should also be optimized for search engines using meta tags, title and content keywords, anchor texts and internal linking.
10. Home page should have compelling information and should download within 10 second on dial up connection. Also be clear and precise. Ambiguity is certainly not advisable.
11. Don’t use too many colors in page background/text. It should not appear tacky.
12. Colors should be used consistently and there should be good contrast with the text.
13. Use of graphics should serve the purpose. They should be optimized and should not slow down the page. Use small graphics which can load more quickly. Use images to make your content attractive.
14. Your website should be functional. Keep in mind that all the internal and external hyperlinks should work. No page not found error please!
15. Make use of CSS (Cascading Style Sheets) to keep excessive code out of the way.
16. Don’t make your content dull and boring. Break up those long paragraphs. Try to break the monotony with bullet points, use of white spaces and relevant headings and sub headings.
17. Header tags should be used on every page consisting of the information relevant to the page.
18. All the forms should function as expected and there should be no JavaScript errors.
19. Make use of multimedia features. The audio/video/flash file should serve the purpose and should not distract user from the website.
20. Include download times for the audio and video files and provide suitable captions.
21. Provide links to download for media plug-ins.
22. Buying or reserving information should be accessible and hassle free. (Book now, Checkout, Shopping cart, etc.) You can also create logical navigation with “Product” and “Purchase” links.
23. Your site should be friendly to the volunteers. Give detailed information on how you can get them involved and let them participate.
24. If you running business website then you can include a News Section or Blog. People will come back to your site and your website will get more exposure. Add news about your firm and your cause.
25. Lastly, don’t forget to update your navigation and sitemap whenever you add pages to a site.
Have a wonderful website design that everyone will remember as a unique business brand!