Image Maps with CSS

Using classes for targeting individual letters.

HTML

<div class="image-map">
    <a class="map lett-g-1" rel="G" href="#"></a>
    <a class="map lett-o-1" rel="o" href="#"></a>
    <a class="map lett-o-2" rel="o" href="#"></a>
    <a class="map lett-g-2" rel="g" href="#"></a>
    <a class="map lett-l" rel="l" href="#"></a>
    <a class="map lett-e" rel="e" href="#"></a>
</div>

CSS

.image-map {
    background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
    width: 275px;
    height: 95px;
    display: block;
    position: relative;
    margin-top:10px;
    float: left;
}
.image-map > a.map {
    position: absolute;
    display: block;
    border: 1px solid green;
    height: 95px;
    top: 0px;
}
.image-map > a.map.lett-g-1 {
    left: 0px;
    width: 70px;
}
.image-map > a.map.lett-o-1 {
    left: 70px;
    width: 50px;
}
.image-map > a.map.lett-o-2 {
    left: 120px;
    width: 50px;
}
.image-map > a.map.lett-g-2 {
    left: 170px;
    width: 40px;
}
.image-map > a.map.lett-l {
    left: 210px;
    width: 20px;
}
.image-map > a.map.lett-e {
    left: 230px;
    width: 40px;
}

JavaScript

$(".map").click(function () {
    alert('You clicked on letter "' + $(this).attr('rel') + '"');
});