Jquery Mouseover изображение на изображение со ссылкой

Question

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

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

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

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

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

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

Благодаря

Answer 1

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

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

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

---

на Pre IE7 вам могут понадобиться, чтобы добавить Jquery линии

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

1. по наведению оберточной DIV добавить класс, а к нему, потому что IE не поддерживает событие парения на дивы .. (и обновлять правила CSS соответственно)

Answer 2

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

• 1.Use скрытый DIV (чтобы показать его после щелчка))
• 2.На ссылку нажмите - то вы должны использовать JQuery "получить" http://api.jquery.com/jQuery.get/ -
  • отправить запрос на сервер с конкретным Params (ID, или что-то еще .. ) получить текущую cordinates ссылки (для сНа шоу)
• 3.Server будет реакция вы с данными. (Из datbase .. для примера)
• 4.Show div, с сердечками.:)

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

Answer 3

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

Некоторые вещи, как

<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(); 
    }); 
}); 

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

Answer 4

Абсолютно простым способом является использование 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; }