Jquery image mouseover sur l'image avec un lien

Question

J'ai lu un peu et je suis en train de trouver une solution qui fait cela:

Lorsque vous déplacez votre souris sur sur l'une des images de ce produit, un bouton apparaît qui est un lien href. En cliquant sur ce bouton ouvre une boîte de superposition. Je prévois d'utiliser thickbox pour ça.

Mon problème est d'essayer de comprendre comment utiliser Jquery pour montrer cette image lorsque la souris est sur l'image. Voici un exemple:

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

Le bouton est juste la bonne taille et apparaît correctement dans tous les navigateurs et toujours en accord avec sa position dans l'image.

Toute aide est très appréciée.

Merci

Answer 1

vous pouvez le faire avec CSS seulement ...

exemple à http://jsfiddle.net/nAhTF/
explication

1. envelopper l'image et un lien dans un positionné par rapport div
2. position absolue le lien où vous le souhaitez et le rendre display:none
3. sur :hover d'emballage changement div display à block

---

sur Pre IE7 vous pourriez avoir besoin d'ajouter une ligne jquery

exemple à http://jsfiddle.net/nAhTF/1/
explication

1. sur vol stationnaire d'emballage div ajouter une classe aussi bien à lui, parce que IE ne supporte pas l'événement de vol plané sur divs .. (et mettre à jour les règles CSS en conséquence)

Answer 2

Comment utiliser jquery:

• 1.Utiliser div caché (pour montrer après clic))
• lien 2.Sur clic - alors vous devriez utiliser jquery "get" http://api.jquery.com/jQuery.get/ -
  • envoyer une requête à un serveur avec params spécifiques (ID, ou quelque chose d'autre ..) Inscrivez-vous cordinates lien en cours (pour le spectacle div)
• 3.Server réponse vous avec des données. (De datbase .. pour un exemple)
• 4.Show div, avec cordinates.:)

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

Answer 3

Le site que vous lié à une image utilise qui est positionné sur le haut de l'image avec un clickevent sur elle

quelque chose comme

<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;" /> 

Avec un script quelque chose comme:

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

Mais avec plus d'informations de position que cela le met juste dans le coin supérieur gauche de l'étiquette (espérons-le). Je voudrais utiliser quelque chose de similaire mais avec un style et un lien dans le même conteneur que le lien afin que je puisse le styler avant de le cacher et d'ajouter les scripts, mais aussi des navigateurs non-javascript compatibles (Je sais que vous pouvez toujours l'éteindre)

Answer 4

Le moyen le plus simple est d'utiliser 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; } 

---

Maintenant, cela ne fonctionne pas dans les anciennes versions de IE. Si c'est un problème, vous pouvez ajouter une classe avec jQuery, et l'utiliser dans le CSS.

JS:

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

CSS:

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