How-To Guide
How to create an HTML image map with clickable areas
An image map gives different parts of one image their own links. Native HTML uses an img element with usemap, a named map, and an area for each clickable region. It works well for a simple diagram with a few links. Here is a small example and what to change when the image needs to resize.
Step by step
Follow these steps
Prepare the image and its dimensions
Export your diagram or floor plan and record its width and height in pixels. The example below uses a 600 × 400 image. Replace floor-plan.png with your own image URL and measure the regions against that same image size.
Link the image to a named map
Set usemap on the img element to a fragment such as #floor-plan. The map element must have the matching name, floor-plan. Use a different map name if you put a second mapped image on the page.
Define an area for each link
Use shape=rect for a rectangle, circle for a circle, or poly for an outline made of several points. Rectangle coordinates are left, top, right, bottom. Polygon coordinates are alternating x and y values. Each linked area needs an href and meaningful alt text describing its destination.
Check the links at the original image size
Open the page and click inside and outside each region. Tab through the linked areas and confirm the link labels make sense. Replace the sample destination paths with real pages on your site. Add ordinary text links below the image so visitors can reach the same information without using the map.
Choose how the map should behave when it resizes
Native area coordinates are pixel values. Setting max-width:100% on the image alone does not recalculate them. A JavaScript resize handler must scale the original coordinates by the displayed-to-original width and height ratios. Always start from the original coordinates rather than scaling already changed values.
Use SVG or a plugin for maps you update frequently
An SVG overlay with a viewBox can keep the image and regions in the same coordinate system as they scale. You still need to implement links, data and interactions. On WordPress, Interactive Real Estate provides an SVG polygon editor and property details, then embeds the map with a shortcode.
HTML image map example with two clickable rooms
<img src="floor-plan.png" width="600" height="400"
usemap="#floor-plan" alt="Floor plan with an office and meeting room">
<map name="floor-plan">
<area shape="rect" coords="20,20,280,180"
href="/rooms/office" alt="Office details">
<area shape="poly" coords="320,20,580,20,580,180,320,180"
href="/rooms/meeting-room" alt="Meeting room details">
</map>
<p>Room details:
<a href="/rooms/office">Office</a>
<a href="/rooms/meeting-room">Meeting room</a>
</p>This is a fixed-coordinate example, not a responsive map. The coordinates assume an image displayed at 600 × 400 pixels. The room URLs are placeholders to replace. HTML map and area elements are supported in current browsers; HTML5 does not automatically add coordinate scaling.
HTML map element reference on MDNResponsive coordinate calculation
For an image drawn at 300 × 200 instead of 600 × 400, multiply every x and y coordinate by 0.5. With other dimensions, x uses displayed width / original width and y uses displayed height / original height. Wait until the image has loaded, and recalculate when its container changes size. Cropping with object-fit:cover needs additional offset handling; keeping the full image visible is simpler.
JavaScript, jQuery and React image maps
These are implementation choices around the same image-map task. Native links need no JavaScript at a fixed size. A resize utility can update area coordinates; React can render the same map and area markup. Neither adds a visual editing interface or an availability database by itself. Choose them when you are building and maintaining a custom application.
When a WordPress image map plugin fits better
Use a visual editor when a property team needs to edit areas and unit details without changing HTML. Interactive Real Estate is built around buildings, floors and units. It is a fit for property maps; it does not export a standalone HTML map for React, SharePoint or a site without WordPress.
Related image map guides and features
Live preview
See how an interactive building works on your website
Buyers explore your development the way they actually want to — click any unit for its price, area, floor and availability. They find the flat that fits before they ever pick up the phone, and your sales team spends its time on people who are ready to buy.
Free plan on WordPress.org — no credit card required
Click · Filter · Reserve
One shortcodeFAQ
Frequently asked questions
Are HTML image maps still supported?
How do I make an HTML image map responsive?
What is the difference between an HTML image map and an SVG image map?
Does Interactive Real Estate generate HTML map code?
Ready to make your images interactive?
Install the free version from WordPress.org and create your first interactive floor plan in minutes — no coding required.