проблемы с меняющимися картинками

Доброго времени суток! Возникла такая проблема...
Хедер состоит из ОДНОГО большого изображения. В самом хедере прорисованы картинки-кнопки. Использовал тег <map> : контуры и ссылки чётко встали, но не получается реализовать меняющиеся изображения при наведении на эти контуры - они вылазят совсем далеко за границы сайта
// отрывок из index.php//

<tr>
<td colspan="3" align="center">
<img src="<?php echo $mosConfig_live_site;?>/templates/АА/images/work3_04.gif" width="1050" height="350" border="0px" alt="АА" usemap="#links">
</td>
</tr>

//и сам отрывок тега //
<map name="links">
<area shape="rect" coords="605,115,810,220" href="/GG/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=15" target="_self" title="Вход"><img src="/GG/images/stories/zakaz.gif" border="0" width="180" height="100" align="absbottom" onMouseOver="document.pic1.src='/GG/images/stories/zakaz_hover.gif'" onMouseOut="document.pic1.src='/GG/images/stories/zakaz.gif'" name="pic1" alt="zakaz">

</map>
</body>
</html>


Вопрос: Почему эти меняющиеся изображения выходят за границы сайта,хотя всё прописано в одном теге и выводится должно правильно... Спасибо за внимание!

 

Может попробовать CSS-hover, вместо яваскрипта. Ну мало ли что.