JQuery Наведите курсор мыши на изображение с ссылкой - PullRequest
1 голос
/ 06 октября 2010

Я прочитал довольно много, и я пытаюсь найти решение, которое делает это:

Когда вы наводите указатель мыши на любое из изображений продукта, появляется кнопка, которая является ссылкой href.Нажатие на эту кнопку открывает окно оверлея.Я планирую использовать для этого Thickbox.

Моя проблема состоит в том, чтобы выяснить, как использовать Jquery, чтобы показать это изображение, когда на нем находится указатель мыши.Вот прекрасный пример:

http://oldnavy.gap.com/browse/category.do?cid=55474

Кнопка имеет правильный размер и правильно отображается во всех браузерах и всегда соответствует ее положению на изображении.

Любая помощь очень ценится.

Спасибо

Ответы [ 4 ]

2 голосов
/ 06 октября 2010

Вы можете сделать это только с помощью CSS ...

пример на http://jsfiddle.net/nAhTF/
объяснение

  1. обернуть изображение и ссылку вотносительное положение div
  2. абсолютное положение ссылки, где вы хотите, и сделайте это display:none
  3. на :hover оберточного div, измените display на block

в Pre IE7 вам может понадобиться добавить строку jquery

пример в http://jsfiddle.net/nAhTF/1/
объяснение

  1. при наведении курсора на div также добавляет к нему класс, потому что IE не поддерживает событие hover для div .. ( и соответственно обновляет правила css )
0 голосов
/ 06 октября 2010

Самый простой способ - использовать CSS.

HTML:

<div class="product">
    <img src="product.jpg" alt="a product" />
    <a class="buy-button" href="javascript:alert('bought');">Buy now</a>
</div>

CSS:

.product .buy-button { display: none; }
.product:hover .buy-button { display: inline; }

Теперь это не работает в старых версиях IE. Если это проблема, вы можете добавить класс с помощью jQuery и использовать его в CSS.

JS:

$('.product').hover(
    function(){ $(this).addClass('hover'); },
    function(){ $(this).removeClass('hover'); }
);

CSS:

.product.hover .buy-button { display: inline; }
0 голосов
/ 06 октября 2010

Сайт, на который вы ссылаетесь, использует изображение, расположенное поверх изображения с кликвентом

Что-то вроде

<a href="#" class="quicklink"><img src="item1.jpg" /></a>
<a href="#" class="quicklink"><img src="item2.jpg" /></a> 
<a href="#" class="quicklink"><img src="item3.jpg" /></a>

...

<img src="button.jpg" id="button" style="dispaly:none;" />

С помощью скрипта что-то вроде:

function handler(){
 //possible event for button
}

$(function(){
   $('a.quicklook').mouseover(function(){
      $('#button').css({position:'absolute',top:$(this).offset().top+'px',right:$(this).offset().right+'px'})
      .show().bind('click',handler);
   }).mouseout(function(){
      $('#button').hide();
   });
});

Но с большей информацией о положении, она просто помещает ее в верхний левый угол тега (надеюсь). Я бы использовал что-то похожее, но, возможно, со стилем и ссылкой внутри того же контейнера, что и ссылка, чтобы я мог стилизовать его перед тем, как его скрыть и добавить сценарии, а также возможность для обратно-совместимых браузеров, не поддерживающих JavaScript, если они все еще существуют ( Я знаю, что вы всегда можете выключить его)

0 голосов
/ 06 октября 2010

Как использовать jquery:

  • 1. Используйте скрытый div (чтобы показать его после клика))
  • 2. По ссылке нажмите - тогда вам следует использовать jquery "get" http://api.jquery.com/jQuery.get/ -
    • отправить запрос на сервер с конкретные параметры (идентификатор или что-то еще ..) получить текущую ссылку кординаты (для div show)
  • 3.Сервер ответит вам данными. (Из базы данных .. для примера)
  • 4.Показывает div, с кординатами. :)

http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html

...