CSS Imagemaps

Now that the redesign is pretty much finished, I can start posting again. Today, I’ll talk about image mapping…in CSS! The result of this will look somewhat like facebook’s image viewer where people’s heads are outlined with a box. Of course, you’d need a pretty advanced face algorithm to find faces in a picture automatically, but I’ll just show you the box part.

This is going to be similar to the CSS rollover image links that I posted a while back.

Basically, it utilizes a:hover in CSS.

The CSS:

span.box{
	position:relative;
	background:url(fog.jpg) no-repeat;
	width:534px;
	height:321px;
	display:block;
	margin:0;
	padding:0;
}
span.box span.marker{
	margin:0 auto 0 auto;
	text-align:center;
	display:block;
}
span.box a{
	position:absolute;
	border:0;
	display:block;
	width:100px;
	height:100px;
}
span.box a:hover{
	border:2px solid #FFF;
}
a#box1{
	position:absolute;
	top:100px;
	left:160px;
}
a#box2{
	position:absolute;
	top:200px;
	left:400px;
}

Explanation:

Simple enough. When the cursor hovers over the link, it’ll change the border of the span to white and 2 pixels. Of course, you can change the size and color of the border.

The HTML:

<span class="box">
    <a href="http://www.csswoes.com" id="box1"><span class="marker">Trees</span></a>
    <a href="http://www.csswoes.com" id="box2"><span class="marker">Water</span></a>
</span>

Explanation:

Nothing really to explain here. The HTML is pretty straightforward. The “marker” class is just there as a visual marker. You can style it anyway you want or get rid of it all together.

The Result:

Trees
Water

Just place the cursor over “Trees” or “Water” and you should see a white border pop up.