0

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
6
Views
7 Years
Discussion Span
Last Post by codecat
0

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?

0

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".

0

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.

0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.