We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.

How Do I Create an HTML Image Map?

By Alex Newth
Updated May 16, 2024
Our promise to you
EasyTechJunkie is dedicated to creating trustworthy, high-quality content that always prioritizes transparency, integrity, and inclusivity above all else. Our ensure that our content creation and review process includes rigorous fact-checking, evidence-based, and continual updates to ensure accuracy and reliability.

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

Editorial Standards

At EasyTechJunkie, we are committed to creating content that you can trust. Our editorial process is designed to ensure that every piece of content we publish is accurate, reliable, and informative.

Our team of experienced writers and editors follows a strict set of guidelines to ensure the highest quality content. We conduct thorough research, fact-check all information, and rely on credible sources to back up our claims. Our content is reviewed by subject-matter experts to ensure accuracy and clarity.

We believe in transparency and maintain editorial independence from our advertisers. Our team does not receive direct compensation from advertisers, allowing us to create unbiased content that prioritizes your interests.

When a link is added to an image in Hypertext Markup Language (HTML), that link is added to the entire image. This can be a problem if the programmer wants to make a single image with several areas or buttons and each area is used for a different link. An HTML image map allows the programmer to specify certain areas where the link will go, allowing him or her to embed several links into one image. This is done by specifying a shape for the link and telling the HTML what coordinates are to be used for the link.

Images used for the Internet are measured in pixels. Knowing how many pixels are in the image is the first essential step to creating an image map. For example, a rectangular image is being used that has a height of 400 pixels and a width of 250 pixels. Next, the programmer has to know how to accurately measure the shape in coordinates for the HTML image map to work properly.

The top left corner is called 0,0 when using an HTML image map. The bottom right corner in this case would be 250,400. The measurements are made with the width first, and then the height. An easy way to think of it is that the first measurement is telling the HTML how far to the right to go from the left edge and the second is how telling it how many pixels down to go. If the programmer wants a point on the map to be 10 pixels from the left edge and 50 pixels down, the coordinates would be 10,50.

There are three different shapes the programmer can invoke for an HTML image map: rect, circle and polygon. "Rect" stands for rectangle, and the programmer has to first type the coordinates for the top left corner and then the bottom right. A circle is specified by typing the coordinates where the circle begins, and then radius of the circle. A polygon is created by typing in all five coordinates, from the top to the right.

HTML image map coding goes like this: <map name="test">
<area href="url.html" shape=rect coords="10,50,20,60">
<area href="url.html" shape=circle coords="10,50,4">
<area href="url.html" shape=polygon coords="10,50,12,55,15,60,13,65,8,55">

Each HTML image map must have a name, and the "url.html" section is the link where that section of the image map will lead a user when he or she clicks on it. When the image is placed on the website with HTML, the programmer must write: usemap="test." This will tell the image what HTML image map to use.

EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.