Как исправить зависание на прозрачной фотографии

Я воссоздал вашу ситуацию js-fiddle. Вместо того, чтобы использовать картинки, я использовал цвета. Ограничивающие коробки гораздо более заметны.

http://jsfiddle.net/Wy7Fp/

Как вы можете видеть, ваши поля перекрываются. Вам придется придумать какой-то способ справиться с этим или использовать карту изображений, чтобы вы могли просто использовать одно большое изображение

Изменения в вашем css, чтобы лучше видеть ограничивающий прямоугольник:

contentwrap {
    min-width: 1150px;
    max-width: 1150px;
    min-height: 700px;
    max-height: auto;
    margin: 0 auto;
    border: 0px solid #bdbebe;
    top: -52px;
    position: relative;
    padding-bottom: 20px;
}
#washington{
    background-color:green;
    background-repeat: no-repeat;
    width: 126px;
    height: 92px;
    background-position: 0px 0px;
    position: relative;
    top: 92px;
    left: 122px;
    display: block;
}
#washington:hover {
    background-position: -131px 0;
}
#oregon{
    background-color:blue;
    background-repeat: no-repeat;
    width: 154px;
    height: 126px;
    background-position: 0px 0px;
    position: relative;
    top: 58px;
    left: 88px;
    display: block;
}
#oregon:hover {
    background-position: -162px 0;
}
#california{
    background-color: red;
    background-repeat: no-repeat;
    width: 154px;
    height: 262px;
    background-position: 0px 0px;
    position: relative;
    top: 28px;
    left: 71px;
    display: block;
}
#california:hover {
    background-position: -155px 0;
}
#nevada{
    background-color:orange;
    background-repeat: no-repeat;
    width: 155px;
    height: 186px;
    background-position: 0px 0px;
    position: relative;
    top: -215px;
    left: 137px;
    display: block;
}
#nevada:hover {
    background-position: -171px 0;
}

Здесь фактическое рабочее решение:

Я пошел вперед и настроил метод карты изображения для вас, используя предоставленное изображение. Вы можете увидеть его в действии, здесь.

HTML

<img id="states" src="http://archive.dadelamkins.com/StackExchange/20697449/Normal%20Map.png" usemap="#states" />

<map name="states">
    <area shape="poly" coords="255,70,169,49,169,73,133,54,133,90,130,104,143,109,147,111,147,115,147,118,147,123,158,129,164,126,178,132,210,134,242,139,248,105" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/Washington.png')" href="#" />
    <area shape="poly" coords="133,109,99,183,94,200,218,234,232,184,229,180,229,173,246,151,244,144,234,141,220,137,187,135,175,135,164,129,149,129,144,126,146,113,140,109" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/Oregon.png')" href="#" />
    <area shape="poly" coords="274,247,246,388,235,384,230,406,155,293,171,224" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/Nevada.png')" href="#" />
    <area shape="poly" coords="167,223,98,204,96,220,89,233,84,239,87,250,90,259,83,274,97,304,104,300,104,318,99,314,97,325,104,330,102,342,114,381,114,391,117,398,131,402,141,414,148,415,152,421,156,426,168,439,170,454,218,463,224,457,220,458,219,448,232,430,232,422,226,407,152,294,160,256" onmouseover="flip('http://archive.dadelamkins.com/StackExchange/20697449/California.png')" href="#" />
</map>

Javascript

flip = function(img) {
    document.getElementById("states").src = img;
}