Image Maps with rollover effect

Rollover effect on image map.

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>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS

.image-map {
    background: url('http://mattstow.com/experiment/responsive-image-maps/powerpuff-girls.fw.jpg');
    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;
}
#clone {
    background: #fff;
}
.image-map > a.map.lett-g-1 {
    left: 0px;
    width: 70px;
}
.image-map > a.map.lett-o-1 {
    left: 70px;
    width: 47px;
}
.image-map > a.map.lett-o-2 {
    left: 117px;
    width: 47px;
}
.image-map > a.map.lett-g-2 {
    left: 167px;
    width: 50px;
}
.image-map > a.map.lett-l {
    left: 214px;
    width: 20px;
}
.image-map > a.map.lett-e {
    left: 234px;
    width: 35px;
}
.image-map > a.map.lett-g-1:hover {
    background-position: -235px 0;
    margin-left: 15px;
}
.image-map > a.map.lett-o-1:hover {
    background-position: -210px;
    margin-left: 10px;
    width: 26px;
}
.image-map > a.map.lett-o-2:hover {
    background-position: -165px;
    width:49px;
}
.image-map > a.map.lett-g-2:hover {
    background-position: -120px;
    margin-left:-1px;
    width:46px;
}
.image-map > a.map.lett-l:hover {
    background-position: -70px;
    margin-left: -15px;
    width: 50px;
}
.image-map > a.map.lett-e:hover {
    width: 70px;
}

JavaScript

$( "#dialog" ).dialog({autoOpen: false});

$(".map").click(function () {
    $( "#dialog" ).dialog('open');
});