Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2010, 17:33
Аспирант
Отправить личное сообщение для tazododu Посмотреть профиль Найти все сообщения от tazododu
 
Регистрация: 18.02.2010
Сообщений: 90

Мыкает действие mouseout
всем привет!
необходимо сделать увеличение картинки при заведении на нее мышкой и при отведении снова уменьшать(менять картинки с разным разрешением) задача тривиальная. написал следующее:
$(".pic_pp_border").hover(function(){
	var name = $(this).attr('id');
	var pic_url = '<img src="http://zakupka-images.s3.amazonaws.com/m_' + name + '.jpg" />';
			  $(this).css("position","absolute").css("width","200px").css("height","200px");
	$(this).html(pic_url);
})
		
$(".pic_pp_border").mouseout(function(){
	var name = $(this).attr('id');
	var pic_url = '<img src="http://zakupka-images.s3.amazonaws.com/s_' + name + '.jpg" />';
			$(this).css("position","static").css("width","100px").css("height","100px");
	$(this).html(pic_url);
})

но столкнулся вот с какой проблемой:
когда наводишь на картинку она начинает туда-сюда непрерывно увеличиваться и уменьшаться... что посоветуете чтобы этого избежать?
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2010, 19:20
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

tazododu,
$(".pic_pp_border").hover(function(){
    var name = $(this).attr('id');
    var pic_url = '<img src="http://zakupka-images.s3.amazonaws.com/m_' + name + '.jpg" />';
              $(this).css("position","absolute").css("width","200px").css("height","200px");
    $(this).html(pic_url);
},
         
function(){
    var name = $(this).attr('id');
    var pic_url = '<img src="http://zakupka-images.s3.amazonaws.com/s_' + name + '.jpg" />';
            $(this).css("position","static").css("width","100px").css("height","100px");
    $(this).html(pic_url);
})
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2010, 22:00
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

Цитата:
что посоветуете
Почитать в документации Jquery про hover...
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2010, 09:42
Аспирант
Отправить личное сообщение для tazododu Посмотреть профиль Найти все сообщения от tazododu
 
Регистрация: 18.02.2010
Сообщений: 90

JsLoveR - большое спасибо за помощь в решении!!
float - тут вы правы, прочитал и сразу все стало ясно)
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2010, 16:05
Аспирант
Отправить личное сообщение для tazododu Посмотреть профиль Найти все сообщения от tazododu
 
Регистрация: 18.02.2010
Сообщений: 90

ребят, еще вопрос, когда проводишь слишком быстро картинка увеличивается, но не уменьшается, что посоветуете?
Ответить с цитированием
  #6 (permalink)  
Старый 06.08.2010, 15:40
Аспирант
Отправить личное сообщение для tazododu Посмотреть профиль Найти все сообщения от tazododu
 
Регистрация: 18.02.2010
Сообщений: 90

кому интересно в мозиле есть баг - при переходе границы элементов может всплывать аут
Ответить с цитированием
  #7 (permalink)  
Старый 06.08.2010, 15:51
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Это не баг и это во всех браузерах.
Ответить с цитированием
  #8 (permalink)  
Старый 06.08.2010, 16:10
Аспирант
Отправить личное сообщение для tazododu Посмотреть профиль Найти все сообщения от tazododu
 
Регистрация: 18.02.2010
Сообщений: 90

гм...проверял в Opera 10.60 все работает четко,
в Хроме та же беда, что в ФФ...
читал, что надо писать функции с таймером: на аут ставить таймер, а на овер - отменять. но так и не въехал как это сделать. вы мне не поможете?
Ответить с цитированием
  #9 (permalink)  
Старый 06.08.2010, 17:45
Аспирант
Отправить личное сообщение для tazododu Посмотреть профиль Найти все сообщения от tazododu
 
Регистрация: 18.02.2010
Сообщений: 90

проблема решена, сделал так
сделал так
$(".product_pic").hover(
	function(){
		var name = $(this).attr('id');
		var pic_src = 'http://zakupka-images.s3.amazonaws.com/m_' + name + '.jpg';
		$(this).find("img").attr("src",pic_src);
	},
	function(){
		var name = $(this).attr('id');
		var pic_src = 'http://zakupka-images.s3.amazonaws.com/s_' + name + '.jpg';
		$(this).find("img").attr("src",pic_src);
	}
);

и все стало ГУД!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
Запуск функции если mouseout frolvict Общие вопросы Javascript 10 27.04.2010 17:16
mouseout: Определить дочерние элементы Papa Общие вопросы Javascript 3 03.02.2010 20:29
Двойное действие при клике по ссылке spider Элементы интерфейса 5 10.11.2009 10:43