Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2013, 17:21
Интересующийся
Отправить личное сообщение для pagemaster Посмотреть профиль Найти все сообщения от pagemaster
 
Регистрация: 08.04.2013
Сообщений: 23

Изменение рабочей области изображения
Здравствуйте уважаемые знатоки!)
Возникла следующая проблема:
есть скрипт (это часть скрипта):
$(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>

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

заранее благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2013, 17:25
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

попробуйте вместо div использовать map, area
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2013, 17:28
Аватар для bret
Кандидат Javascript-наук
Отправить личное сообщение для bret Посмотреть профиль Найти все сообщения от bret
 
Регистрация: 04.10.2008
Сообщений: 128

Цитата:
Может нужно карту изображения как-то сделать и её привязать к скрипту
Как вариант. Можно с canvas, но это сложнее
__________________
я подыскиваю мозг... твой подойдёт
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2013, 17:47
Интересующийся
Отправить личное сообщение для pagemaster Посмотреть профиль Найти все сообщения от pagemaster
 
Регистрация: 08.04.2013
Сообщений: 23

Сообщение от zebra Посмотреть сообщение
попробуйте вместо div использовать map, area
а не покажете на примере как это делается?)
как на картинке сделать мапу и как её потом в скрипте привязать...

я знаю вот есть неплохой сервис для создания мапы
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2013, 17:52
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Сообщение от pagemaster
а не покажете на примере как это делается?)
Понятия не имею. Попробуйте сами
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2013, 19:32
Интересующийся
Отправить личное сообщение для pagemaster Посмотреть профиль Найти все сообщения от pagemaster
 
Регистрация: 08.04.2013
Сообщений: 23

может кто знает?
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2013, 20:36
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Наложите на дивы map у которого z-index будет больше чем у картинок. Пропишите area с координатами. При наведении на area двигайте нужный див.
Ответить с цитированием
  #8 (permalink)  
Старый 12.04.2013, 15:16
Интересующийся
Отправить личное сообщение для pagemaster Посмотреть профиль Найти все сообщения от pagemaster
 
Регистрация: 08.04.2013
Сообщений: 23

Сообщение от zebra Посмотреть сообщение
Наложите на дивы 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);
	                }
	            );     
	        });
Ответить с цитированием
  #9 (permalink)  
Старый 12.04.2013, 15:23
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Вот создали разметку со всеми картинками. Наложите сверху map в котором прописаны все координаты для наведения. При наведении на area определите какой под ним находится div с рисунком, и потом его и анимируйте.
Ответить с цитированием
  #10 (permalink)  
Старый 12.04.2013, 16:38
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<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...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение размера изображения - произвольно по 4-м вершинам dubsage Элементы интерфейса 6 11.10.2012 12:30
Получить размеры рабочей области окна в Chrome unclechu Events/DOM/Window 1 13.09.2011 01:37
Как можно найти разрешение рабочей области браузера? Влад Общие вопросы Javascript 3 20.07.2009 09:18
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 15:55