Изменение рабочей области изображения
 

Здравствуйте уважаемые знатоки!)
Возникла следующая проблема:
есть скрипт (это часть скрипта):

$(window).load(function(){
	      
	            $('#1 a').hover(
	                function () {
	                    $(this).stop().animate({
	                    'left': '431px',
	                    'top': '270px'
	                    }, 300);
	                },
	                function () {
	                    $(this).stop().animate({
	                    'left': '465px',
	                    'top': '322px'
	                    }, 300);
	                }
	            );  
  });

и код изображения:

<div id='1'>
<a href='#' style="position:absolute; left:465px; top:322px"><img src="images/1.png"></a>
</div>

вот ссылка где все работает ТЫЦ
Перейдя по ссылке вы можете заметить что изображения у меня треугольные и при наведении на изображение происходит анимация через скрипт, но загвоздка в том что область изображения квадратная, и изображения цепляют друг друга, в итоге когда наводишь на один кусок - цепляется другой...
Как можно решить эту проблему? Может нужно карту изображения как-то сделать и её привязать к скрипту...

заранее благодарен!

попробуйте вместо div использовать map, area

Как вариант. Можно с canvas, но это сложнее

а не покажете на примере как это делается?)
как на картинке сделать мапу и как её потом в скрипте привязать...

я знаю вот есть неплохой сервис для создания мапы

Понятия не имею. Попробуйте сами :no:

может кто знает?

Наложите на дивы map у которого z-index будет больше чем у картинок. Пропишите area с координатами. При наведении на area двигайте нужный див.

как то вот так?

<map id="imgmap2013412143549" name="imgmap2013412143549" style="z-index:1">
<area shape="poly" alt="Волосы, ногти, зубы" title="" coords="2,76,35,47,100,13,141,4,174,4,175,240" href="phakty.html#bookmark1" target="_self">
</map>

<div id="1" style="position:absolute; overflow:hidden; left:465px; top:322px; width:180px; height:255px; z-index:0">
<img src="images/1.png" alt="" border=0 width=180 height=255 usemap="#imgmap2013412143549"></div>
</div>

а как эту область в скрипте указать? как то так?

$(window).load(function(){
	      
	            $('#imgmap2013412143549').hover(
	                function () {
	                    $(this).stop().animate({
	                    'left': '431px',
	                    'top': '270px'
	                    }, 300);
	                },
	                function () {
	                    $(this).stop().animate({
	                    'left': '465px',
	                    'top': '322px'
	                    }, 300);
	                }
	            );     
	        });

Вот создали разметку со всеми картинками. Наложите сверху map в котором прописаны все координаты для наведения. При наведении на area определите какой под ним находится div с рисунком, и потом его и анимируйте.

<area shape="poly" alt="Волосы, ногти, зубы" title="" coords="2,76,35,47,100,13,141,4,174,4,175,240" href="phakty.html#bookmark1" target="_self" class="someClass">

$('.someClass').hover...