Image Map In Css?

I have images that are also links, coded like this: They work fine, but I want it to be a lin

Solution 1:

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

The HTML:

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

The CSS:

.container {
 position: relative;
}
.containerimg {
 width: 100px;
 height: 100px;
 border: 5px solid #fff;
}
.containera {
 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)

Solution 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!