You still need to fix the space below the divs, but this should work
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default
CSS:
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}