CODEWITHSUNDEEP
jqueryimagemouseover
eddys
eddys

Reputation: 11

Jquery mouseover image on image with a link

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

Upvotes: 1

Views: 4201

Answers (4)

Markus Hedlund
Markus Hedlund

Reputation: 24284

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196027

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)

Upvotes: 2

BenWells
BenWells

Reputation: 327

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)

Upvotes: 0

Oyeme
Oyeme

Reputation: 11225

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

Upvotes: 0

Related Questions