анимированый банер с 2 ссылками

<p><img src="images/imgname.png" 330="" alt="" usemap="#pl" height="373" width="868" /> <map name="map">
<area shape="circle" coords="460,170,105" alt="1" href="ccылка на маткриал" />

<area shape="circle" coords="215,156,120" alt="2" href="ccылка на маткриал" />
</map></p>



делается это с помощью MAP осталось только понять как при на ведении на облость менять картинку есть идеи?

Я бы рекомендовал делать это слоями, а картинку пускать фоном.

http://jsfiddle.net/BaNru/dqkd3Lvw/
(комментарии написал в примере)

Разумеется дивы можно заменить картинками и не делать тогда фоном. Наверное так будет даже проще.

а как задать отдельные параметры дива что бы он не влиял на другие блоки?


<p><img src="images/1.png" alt="newuse" usemap="#map_bg" height="373" width="868" /> <map name="map_bg"> <map name="map_bg">
<area shape="circle" coords="460,170,105" alt="use" href="ссылка на матерьял1" onmouseover="document.getElementById('map_bg').src='images/2.png'" onmouseout="document.getElementById('map_bg').src='images/1.png'" />

<area shape="circle" coords="215,171,120" alt="new" href="ссылка на матерьял2" onmouseover="document.getElementById('map_bg').src='images/2.png'"
onmouseout="document.getElementById('map_bg').src='images/1.png'" />
</map></p>


както так можно реализовать с помощью onmouseout onmouseover но данный премер почьмто не пашит=( подскожите мож где ошибся

ставлю пораметры

width: 898px;
height: 373px;

и один блок выше другого

подойдет ли данный код не для банера а для меню?