вот пример:
http://отличная-вода.рф/page.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<head>
<title>Биоэнергетическая вода Лонгавита | Longavita</title>
<!-- Подключаем jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<!-- Подключаем скрипт который двигает наши куски -->
<script src="circle.js"></script>
<!-- Карты кусков -->
<map id="area1" name="area1" style="z-index:6">
<area shape="poly" alt="" title="" coords="180,254,-3,72,74,20,117,5,176,1" href="1" target="" class="image1">
</map>
<map id="area2" name="area2" style="z-index:5">
<area shape="poly" alt="" title="" coords="249,179,1,176,19,78,70,2" href="2" target="" class='image2'>
</map>
<map id="area3" name="area3">
<area shape="poly" alt="" title="" coords="76,174,32,114,9,65,3,2,246,2" href="3" target="">
</map>
<map id="area4" name="area4">
<area shape="poly" alt="" title="" coords="2,178,178,0,214,45,242,109,247,174" href="4" target="">
</map>
<map id="area5" name="area5">
<area shape="poly" alt="" title="" coords="174,174,224,103,245,51,247,-5,0,1" href="5" target="" />
</map>
<map id="area6" name="area6">
<area shape="poly" alt="" title="" coords="0,244,73,233,130,207,171,171,-1,0" href="6" target="" />
</map>
<map id="area7" name="area7">
<area shape="poly" alt="" title="" coords="2,13,65,21,138,53,175,86,2,262" href="7" target="" />
</map>
<map id="area8" name="area8">
<area shape="poly" alt="" title="" coords="173,246,98,232,37,202,0,175,170,9" href="8" target="" />
</map>
<!-- Картинки кусков -->
<div id="1" style="position:absolute; overflow:hidden; left:465px; top:322px; width:180px; height:255px">
<img src="images/1.png" alt="" border=0 width=180 height=255 usemap="#area1">
</div>
<div id="2" style="position:absolute; overflow:hidden; left:393px; top:398px; width:252px; height:180px">
<img src="images/2.png" alt="" border=0 width=252 height=180 usemap="#area2">
</div>
<div id='3'>
<a href='#' style="position:absolute; left:393px; top:579px"><img src="images/3.png" usemap="#area3"></a>
</div>
<div id='4'>
<a href='#' style="position:absolute; left:646px; top:398px"><img src="images/4.png" usemap="#area4"></a>
</div>
<div id='5'>
<a href='#' style="position:absolute; left:647px; top:578px"><img src="images/5.png" usemap="#area5"></a>
</div>
<div id='6'>
<a href='#' style="position:absolute; left:646px; top:579px"><img src="images/6.png" usemap="#area6"></a>
</div>
<div id='7'>
<a href='#' style="position:absolute; left:646px; top:309px"><img src="images/7.png" usemap="#area7"></a>
</div>
<div id='8'>
<a href='#' style="position:absolute; left:469px; top:579px"><img src="images/8.png" usemap="#area8"></a>
</div>
</body>
JS:
$(window).load(function(){
// Используем только этот кусок скрипта для примера привязки области изображения к скрипту
$('.image1').hover(
function () {
$(this).stop().animate({
'left': '465px',
'top': '322px'
}, 300);
},
function () {
$(this).stop().animate({
'left': '431px',
'top': '270px'
}, 300);
}
);
});
// конец области
Вопрос в чем, почему привязка (карты к скрипту по названию класса) не работает? И как прописать (и кому? картам или картинкам?) z-index чтобы слои не накладывались, так как карты созданы но они все равно накладываются...