Member Avatar for codecat

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 codecat
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 codecat

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 codecat

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.