Basically, you would need just a few things. You'd need the size of the container "the image" in terms of image maps and the sizes and positions of the rectangles inside it. This is a basic example:
- Code: Select all
.image {
position: relative;
width: 400px;
height: 300px;
text-indent: -5000px;
}
.box {
position: absolute;
display: block;
}
.box1 {
left: 20px;
top: 40px;
width: 10px;
height: 10px;
}
.box2 {
left: 80px;
top: 220px;
width: 10px;
height: 10px;
}
<div class="image">
<a href="#" class="box box1">Link to box 1 (this text is hidden: SEO purposes only)</a>
<a href="#" class="box box2">More SE text</a>
</div>
You'd have to add a background image to .image, but that's a good outline to start with anyway. Good luck, and when you finish this, I'll definitely download it!