An image map is a single image with several clickable areas, each linking somewhere different. Joomla 5 and 6 have no image map button, but you can add one with plain HTML in the TinyMCE editor, or with an extension if editors need a visual tool.
Step 1: Upload the image
Go to Content → Media, open the images folder and upload the image. Note its width and height in pixels. Use WebP or a compressed JPEG/PNG so the map does not slow the page (see WebP and AVIF for Joomla).
Step 2: Get the coordinates
Open the image in any free image map generator or in an image editor that shows cursor positions. Coordinates are in pixels from the top-left corner of the image at its original size:
rect: x1,y1,x2,y2 (top-left and bottom-right corners)circle: x,y,radiuspoly: x1,y1,x2,y2,x3,y3… for any shape
Step 3: Allow the code in the editor
TinyMCE strips <map> and <area> for some user groups. Go to System → Plugins → Editor – TinyMCE, open your user group’s set, and under Prohibited Elements make sure they are not listed; check that Text Filters in Global Configuration allow your group to save this HTML (Super Users have No Filtering by default).
Step 4: Add the HTML to the article
Open the article, switch to the code view (Toggle Editor or the </> button) and paste:
<img src="images/office-map.webp" width="1200" height="800"
alt="Floor plan of our office" usemap="#office">
<map name="office">
<area shape="rect" coords="40,60,420,380" href="/contact/" alt="Reception">
<area shape="circle" coords="760,300,90" href="/team/" alt="Team area">
<area shape="poly" coords="900,500,1150,520,1100,760,880,740" href="/careers/" alt="Careers">
</map>Every <area> needs an alt; screen-reader users rely on it (see the Joomla accessibility (EAA) guide).
Step 5: Make it work on mobile
Classic image maps use fixed pixel coordinates, so they break when a responsive template shrinks the image. Two fixes: add a small script such as the open-source image-map-resizer through the template’s user.js or a custom script module, or build the clickable areas as absolutely positioned links over the image with percentage sizes. Test on a phone before publishing.
Extension option
If non-technical editors maintain the map, a JED image map or hotspot extension gives a visual editor and responsive output. Check that it lists Joomla 5 or 6 compatibility before installing.
Related Joomla guides
Need hands-on help? See our Joomla development services.
Frequently asked questions
Does Joomla have a built-in image map tool?
No. Joomla core has no image map editor, but the TinyMCE editor accepts map and area HTML, and JED extensions add a visual hotspot editor.
Why does Joomla remove my map code when I save?
The editor or Text Filters strip the map and area tags for your user group. Allow them in the TinyMCE plugin set and in Global Configuration → Text Filters.
Are image maps responsive?
Not by default, because the coordinates are fixed pixels. Use a resizer script or percentage-positioned links for mobile.