Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
You can target <map> and <area> with CSS, but CSS borders and backgrounds do not reliably draw the image-map shapes over the image. An <area> defines a clickable region using shape and coords; it is not a normal CSS box painted at those coordinates. For visible highlights, use SVG or a separate positioned overlay.
How an HTML image map works
An image map connects an image to clickable regions. The image’s usemap attribute points to a named <map>, and each <area> inside the map defines a region and, usually, a link destination.
<img src="diagram.png" width="800" height="500"
alt="Product diagram with interactive parts"
usemap="#product-map">
<map name="product-map">
<area shape="rect" coords="100,80,260,180"
href="/part-a" alt="View Part A">
<area shape="circle" coords="500,250,60"
href="/part-b" alt="View Part B">
</map>The usemap value includes # and must match the map’s name. The coordinates describe image-map geometry: for example, a rectangle’s corners or a circle’s center and radius. The browser uses that geometry to determine which link a pointer or other interaction targets; it does not turn the region into a CSS layout box. See the HTML Standard’s image-map rules and the references for <map> and <area>.
Recommended Free Tools
Why borders, backgrounds, and z-index do not highlight an area
Rules such as these may select an <area>, but they do not reliably paint its coordinate-defined shape on top of the image:
area {
border: 3px solid red;
background: rgb(255 0 0 / 25%);
width: 40px;
height: 40px;
z-index: 10;
}The declarations describe CSS boxes and stacking, while coords describes an image-map hit region. They are different systems. A width or height does not convert the coordinates into a box, and z-index cannot create a painted polygon or circle that is not there.
:hover or :focus may identify an area’s interaction state in a browser, but that does not mean an outline will follow its map geometry. Separate the two jobs: let the map handle hit testing, and use an actual visual element to show the highlight.
Why forcing display: block is not the fix
You may see advice to give area or map a visible display value. Depending on browser behavior and the exact rule, that can expose a CSS box or affect document layout. It does not translate coords="100,80,260,180" into an overlay at that location. The box may appear elsewhere, add unexpected space, or have no useful relationship to the image. display controls CSS layout participation; it does not turn image-map geometry into a visual shape. Avoid treating <map> as a positioned overlay container.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Ways to show visible highlights
Use SVG when shapes need to match the image
SVG is usually the clearest option when regions need visible borders or fills, responsive scaling, or richer interaction. The SVG shapes are actual paintable objects, so the same rectangle or circle can define the link target and its hover or focus appearance.
<svg class="diagram" viewBox="0 0 800 500"
role="img" aria-labelledby="diagram-title">
<title id="diagram-title">Interactive product diagram</title>
<image href="diagram.png" x="0" y="0" width="800" height="500" />
<a href="/part-a" aria-label="View Part A">
<rect class="hotspot" x="100" y="80" width="160" height="100" />
</a>
<a href="/part-b" aria-label="View Part B">
<circle class="hotspot" cx="500" cy="250" r="60" />
</a>
</svg>.diagram { display: block; width: 100%; height: auto; }
.hotspot { fill: transparent; stroke: transparent; stroke-width: 4; }
.diagram a:hover .hotspot,
.diagram a:focus-visible .hotspot {
fill: rgb(255 0 0 / 20%);
stroke: red;
}The viewBox lets SVG geometry scale with the displayed diagram. Give interactive shapes accessible names and test the SVG’s keyboard and assistive-technology behavior in the browsers your project supports.
Use positioned HTML links for simple hotspots
For a few rectangular regions, ordinary links placed over the image are straightforward to style and focus. Keep the wrapper’s proportions tied to the image, and express hotspot positions relative to it.
<div class="diagram-wrap">
<img src="diagram.png" alt="Product diagram">
<a class="hotspot part-a" href="/part-a">
<span class="visually-hidden">View Part A</span>
</a>
</div>.diagram-wrap { position: relative; width: min(100%, 800px); }
.diagram-wrap img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; border: 3px solid transparent; }
.part-a { left: 12.5%; top: 16%; width: 20%; height: 20%; }
.hotspot:hover, .hotspot:focus-visible {
border-color: #c00;
background: rgb(255 0 0 / 20%);
}Percentages are relative to the positioned wrapper. A circular region can use border-radius: 50%; more complex outlines can use clip-path, but test pointer behavior and keyboard focus. These links are real interactive elements, unlike decorative shapes alone.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchKeep a legacy map and add a separate overlay
If existing code depends on an image map, retain it for navigation and place a separate, decorative highlight layer over the image. The overlay needs its own geometry, synchronized with the image. If it is purely visual, hide it from assistive technology and prevent it from intercepting pointer events.
<div class="map-wrap">
<img src="floorplan.png" width="1000" height="600"
alt="Interactive floor plan" usemap="#floorplan-map">
<div class="visual-overlay" aria-hidden="true">
<span class="highlight room-a"></span>
</div>
<map name="floorplan-map">
<area id="room-a-link" shape="rect"
coords="100,100,300,250" href="/rooms/a" alt="Room A">
</map>
</div>.map-wrap { position: relative; width: min(100%, 1000px); }
.map-wrap > img { display: block; width: 100%; height: auto; }
.visual-overlay { position: absolute; inset: 0; pointer-events: none; }
.highlight { position: absolute; display: none; border: 3px solid red;
background: rgb(255 0 0 / 20%); }
.room-a { left: 10%; top: 16.6667%; width: 20%; height: 25%; }
.map-wrap:has(#room-a-link:hover) .room-a,
.map-wrap:has(#room-a-link:focus-visible) .room-a { display: block; }The percentage values above correspond to the example image and region, not arbitrary map coordinates. :has() support should match your browser requirements; otherwise, use JavaScript to toggle an overlay class on pointer and focus events. Make sure the image and overlay remain the same size.
Canvas is an option for highly dynamic diagrams, but you must build hit testing, keyboard access, focus treatment, labels, and fallback content yourself. It is rarely the simplest choice for ordinary navigation links.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Responsive image maps need special care
Map coordinates are associated with the image’s coordinate space. Simply setting img { width: 100%; height: auto; } does not make hand-authored coordinates a robust responsive overlay in every setup. If the displayed image size differs from the size used to define the coordinates, verify that the clickable regions remain aligned at the sizes and zoom levels you support.
Free tools Windows power users keep installed
One-click scans. No signup required.
Practical options are to keep the image at its intrinsic dimensions, update coordinates when it is resized, use a maintained resizing solution that you have checked for accessibility and browser support, or move the interaction to SVG or responsive positioned links. Do not expect area { width: ... } to resize a map region.
Best Value
Make image-map links usable without a mouse
For a linked <area>, alt supplies the link’s text equivalent; it is not merely a tooltip or a CSS label. Describe the destination or action clearly. For example, alt="View Part B specifications" is more useful than alt="click here". The HTML Standard requires alternative text for linked areas and illustrates pairing an image map with text links.
Do not make essential instructions or states available only on hover, and do not rely on color alone to show selection. Provide an equivalent list of ordinary links when the image map is important navigation:
<nav aria-label="Diagram links">
<ul>
<li><a href="/part-a">Part A</a></li>
<li><a href="/part-b">Part B</a></li>
</ul>
</nav>Test keyboard focus, touch targets, zoom, and the text alternative. Image maps are not inherently unusable, but the labels and equivalent paths matter.
Choose the right approach
| Need | Good starting point |
|---|---|
| Basic clickable regions on an existing image | <map> and <area> |
| Visible rectangular hover and focus boxes | Positioned HTML links |
| Responsive circles, polygons, or rich visual states | SVG |
| Keep legacy map hit regions but show highlights | A separate synchronized overlay |
| Highly dynamic custom interaction | SVG or a carefully engineered canvas layer |
In short: CSS can target map elements, but it does not reliably paint their coords-defined shapes. Keep an image map for straightforward hit regions; use SVG or actual positioned elements when users need to see those regions highlighted.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
