Member Avatar for Member #722075

Hello, I'm a newbie to web development, trying to get this image map to work and have no idea where I'm going wrong. The image comes up fine but there are no "hotspots" highlighted, the links don't work, nor does the title pop up when you hover over the area.

<html>
<body>

<map name="Mixer">

<area	shape="rect"
	coords="612,129,681,150"
	href="homepage.php"
	title = "home"
	alt="home button"/>
        

<area	shape="rect"
	coords="716,129,789,150"
	href="music.php"
	title = "music"
        alt="music button"/>

<area	shape="rect"
	coords="834,129,896,150"
	href="cart.php"
	title = "cart"
        alt="cart button"/>

<area	shape="rect"
	coords="906,129,975,150"
	href="playlist.php"
	title = "playlist"
        alt="playlist button"/>

<area	shape="rect"
	coords="992,129,1066,150"
	href="about.php"
	title = "about"
        alt="about button"/>

</map>

<img src = "Mixer.gif" border = "0" style= "position:absolute; top:100px; left:700px; width:472; height:238;" 
 alt = "mixer" align = "top" usemap="#Mixer" />

Many thanks!

  • 3 Contributors
  • 5 Replies
  • 4K Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Member #722075

Dani AI

Generated

A few quick checks that often fix this exact symptom:

  • Image maps do not visually highlight hotspots by default. You should see the cursor change and a tooltip on hover, but no outline. If nothing happens at all, first confirm that usemap="#Mixer" exactly matches the <map name="Mixer"> value (case-sensitive in some modes) and that no other element is layered on top of the image. Temporarily set z-index: 1 on the image and look for any overlapping header or transparent div; if necessary, set pointer-events: none on that overlay while debugging.

  • Coordinates must be based on the image’s intrinsic pixel size. If you scale the image with CSS or the width/height attributes, the original coords will miss. This aligns with scottloway’s hunch. Also note your CSS width:472; height:238; is invalid without units; browsers ignore it, which can add confusion. Either:

    • Render the image at its natural size, or
    • Recalculate coords whenever the image size changes.

If you need the image to be responsive, keep the original coords and scale them at runtime:

<img src="Mixer.gif" usemap="#mixer" alt="Mixer" />
<map name="mixer" id="mixer">
  <area shape="rect" coords="612,129,681,150" href="homepage.php" alt="Home">
  <!-- more areas -->
</map>
<script>
const img = document.querySelector('img[usemap="#mixer"]');
const map = document.querySelector('map[name="mixer"]');
map.querySelectorAll('area').forEach(a => a.dataset.orig = a.coords);
function rescale() {
  const sx = img.clientWidth / img.naturalWidth;
  const sy = img.clientHeight / img.naturalHeight;
  map.querySelectorAll('area').forEach(a => {
    a.coords = a.dataset.orig.split(',').map((n,i)=>Math.round(n*(i%2?sy:sx))).join(',');
  });
}
addEventListener('load', rescale);
addEventListener('resize', rescale);
</script>

If you stick with absolutely positioned overlays (your final approach), make each hotspot a real <a> so it is keyboard-focusable, give it meaningful text (visually hidden if needed), and ensure it sits above the image with position:absolute; z-index rather than blocking the image map unintentionally.

Recommended Answers

All 5 Replies

Member Avatar for scottloway

I admittedly am not an expert on image maps - haven't used them in years - but, I'm curious about the inline resizing of the image; it seems likely that this could be your issue - that is, unless the coordinates were based on the resized image, they would be all wrong. If you remove the height and width values, does it work?

Member Avatar for Member #722075

Hey,

I'm curious about the inline resizing of the image; it seems likely that this could be your issue - that is, unless the coordinates were based on the resized image, they would be all wrong. If you remove the height and width values, does it work?

Thanks a lot for your suggestion, I removed the resizing but still no luck. I got the image co-ords from instead of having "usemap", putting"ismap" initially, just with the large image on the page, and then seeing where the corners of the various rectangles were according to the browser as I rolled the cursor over the areas I wanted to be "hotspots".

Member Avatar for scottloway

Your coordinates I think are relative to the image, and not the page; so that could be part of it, though position: absolute may have an effect on the position context.

Again, these are just guesses really - it would be helpful if you had an URL someplace where we could view this directly.

Member Avatar for ko ko

Try with 'area shap: circle' instead of 'rectangle'. You can find the coordinate with photoshop more exactly.

Member Avatar for Member #722075

Cheers, unfortunately I can't post a url as its part of a uni project so we're only allowed to host locally...I think it was position: absolute causing the problem. I eventually decided to use divs and overlay the images instead.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.