Jquery mouseover image on image with a link

Question

Hello,

I read quite a bit and I am trying to find a solution which does this:

When you move your mouse over on any of the product images, a button appears which is a href link. Clicking on that button opens an overlay box. I plan to use thickbox for that.

My issue is trying to figure out how to use Jquery to show that image when the mouse is over on the image. Here is a great example:

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

The button is just the right size and appears correctly in all browsers and always consistent with its position within the image.

Any help is much appreciated.

Thanks

Answer 1

you can do that with CSS only ...

example at http://jsfiddle.net/nAhTF/
explanation

1. wrap the image and link in a relative positioned div
2. absolute position the link where you want it and make it display:none
3. on :hover of wrapping div change display to block

---

on Pre IE7 you might need to add a jquery line

example at http://jsfiddle.net/nAhTF/1/
explanation

1. on hover of wrapping div add a class as well to it, because IE does not support the hover event on divs.. (and update the css rules accordingly)

Answer 2

How to use jquery:

• 1.Use hidden div(to show it after click))
• 2.On link click - then you should use jquery "get" http://api.jquery.com/jQuery.get/ -
  • send a request to a server with specific params(ID,or something else..)get current link cordinates (for div show)
• 3.Server will response you with data.(From datbase..for an example)
• 4.Show div, with cordinates. :)

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

Answer 3

The site that you linked to uses an image that is positioned over the top of the image with a clickevent on it

Some thing like

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

With a script something like:

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

But with more position information as that just puts it in the top left corner of the a tag (hopefully). I would use something similar but posibly with a style and link inside the same container as the link so I could style it up before hiding it and adding the scripts, also the possibility for back-compatible non-javascript browsers, if they still exist (I know you can always turn it off)

Answer 4

The absolutely easiest way is to use 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; }

---

Now this doesn't work in older versions of IE. If that is a problem you can add a class with jQuery, and use it in the CSS.

JS:

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

CSS:

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