Image map in CSS?

Question

I have images that are also links, coded like this:

  <a href="../www.google.com"><img src="pages/squirrely.png" /></a>

They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen. I tried changing the width and height of the lin, but it didn't work. My css is:

#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff; 
 }

Answer 1

I would not work with an imagemap in this case, but do something like this:

The HTML:

<div class='container'>
 <img .../>
 <a ... ></a>
</div>

The CSS:

.container {
 position: relative;
}
.container img {
 width: 100px;
 height: 100px;
 border: 5px solid #fff;
}
.container a {
 display: block;
 width: 60px;
 height: 60px;
 position: absolute;
 top: 25px;
 left: 25px;
}

Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)

Answer 2

There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:

http://www.maschek.hu/imagemap/imgmap

I hope this helps you with your project!