HTML Advanced: Imagemaps

n imagemap is a graphic image with multiple different clickable areas and embedded links. For example, a map with clickable regions is an imagemap. Each region is linked to a different set of information.

Ways to Use Imagemaps
There are many ways to incorporate imagemaps to create a more interesting and easier-to-navigate site. For example:

  • You might have a site that contains information about different US states. Instead of scrolling through a textual list of states in alphabetical order, you might use a map of the US. When readers click on Massachusetts, they jump to the page that has Massachusetts information.

  • You might have an anatomy site. Instead of offering up a textual outline of body parts, you can offer a model of the human body and have people click on the body part about which they want to learn more.

  • You might want to create a custom graphic as the interface to your site, for example, a circle with your research logo atop of it, with each quandrant of the circle representing an areas of research. Clicking on the green quadrant might takes the reader to the environmental studies group.

There are many ways to use imagemaps to make your site easier to navigate and explain your content more clearly. However, as with other web site features, don’t just add an imagemap to prove that you can — think about how both the graphic and the use of the graphic as a navigation tool makes your site a better experience for your readers.

Also, remember that imagemaps are also graphics and that they do require download time.

Remember that some people turn off graphics in their browsers or use a browser such as Lynx that doesn’t handle graphics. When you use an imagemap, make sure you also include a set of hyperlinked text that provides links to the same information as the imagemap.

Ways to Build Imagemaps
There are three methods you can select from when building an imagemap. The most common are server-side imagemaps and pseudo imagemaps. Client-side maps are an older, and less used, method.

No matter which method you select, however, there are similarities. You need to select the graphic you want to use for your user interface, and have it saved in a web-friendly format. You need to know how you want to divide up the graphic, and where to place each link. And, most importantly, you need to think about how the imagemap fits into the overall design and usability of the site.

Client Side?Client-sideimagemaps use no server resources and depend solely on the browser to create the imagemapeffect.The client-side approach works with all 3.0 and later browsers and doesn’t require anything special of the server.

Pseudo?Pseudo imagemaps, called “slicing” in some recent tools, are a low-bandwidth alternative to creating animagemap. They can also be used to create low-bandwidth special effects.If bandwidth is an issue or if you are using a larger graphic as your interface, explore pseudo imagemaps.

Server Side?A server-side imagemap relies on the server’s imagemap program to deliver the imagemap to readers. This was the first way that image maps were used, but it is used much less often today. If your readers are using older browsers, consider using server-side maps.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin


The Latest

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS