HTML Advanced: Imagemaps

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.


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist