jQuery Image Hover on top of multiple dynamic images

Question

Ok so I have a full table of images and just want to always display a small icon on the bottom right of every image on hover. Any ideas how I do this? Right now I have this, and it is just showing the hover image in the same spot every time...it needs to show on top of the image that is hovered. Thanks!

.enlargeImage {
background:url(images/xxx) no-repeat;
position:absolute;
width:16px;
height:14px;
z-index:200;
display:none;
}

$('.table_imageThumbs a').mouseover(function(){
            $(this).show('.enlargeImage');
        });


<div class="enlargeImage"></div>

<table width="408" class="table_imageThumbs">
                  <tr>
                    <td width="102" class="td_thumb"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                    <td width="102"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                    <td width="102"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                    <td width="102"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                  </tr>
</table>

jeroen · Answer 1 · 2011-02-09T19:12:26.040

1

I would use jQuery to dynamically append a .enlargeImage element after the a tag that´s being hovered over and give all table cells a position: relative and .enlargeImage a right: 0; bottom: 0. You´d have to remove the div again on mouseOut (when the hover ends).

However, I have read somewhere here that there are possible problems with absolute positioning inside table cells (can´t find it right now...) so it might not work as expected.

Some untested example code:

el = $("<div>")
     .addClass("enlargeImage");

$('.table_imageThumbs a').hover(
  function() {
    el.appendTo(this);
  },
  function() {
    el.remove();
  });

edited Feb 09 '11 at 19:12

answered Feb 09 '11 at 18:56

jeroen

91,079
21
114
132

'el = $('.enlargeImage'); $('.table_imageThumbs a').hover( function() { el.appendTo(this).show(); }, function() { el.remove(); });' – webwrks Feb 09 '11 at 19:49
This works but it shows the '.enlargeImage' icon in the same spot every time...what about using 'position()' someway to get it's position relative to the div and then place it? Any ideas? Thanks! – webwrks Feb 09 '11 at 19:51
@webwrks You have not copied my example completely; I am adding a new element and you are selecting an existing element (you need to remove that `div` from your code). You also need the `css` modifications from the first part of my answer. – jeroen Feb 09 '11 at 20:14
@jeroen, I tried the code 'el = $("
") .addClass("enlargeImage"); $('.table_imageThumbs a').hover( function() { el.appendTo(this).show(); }, function() { el.remove(); });'
– webwrks Feb 09 '11 at 20:29
and I got the same results...the div was removed also...the only modification I used was the 'show()' function because the 'enlargeImage' class is hidden...now I'm stuck... – webwrks Feb 09 '11 at 20:31
@webwrks Do you have an example page online? – jeroen Feb 09 '11 at 21:34

score 0 · Answer 2 · answered Feb 09 '11 at 18:48

OK, two things:

If you want to show the correct .enlargeImage, you'll need to do something like:

$(this).siblings('.enlargeImage').show(); //depends on whether .enlargeImage is a sibling
You'll need to make the parent element containing the image and the icon position: relative so the position: absolute of .enlargeImage is relative to the correct parent.

~~If you need more help than that then you'll need to show your HTML structure, preferably using jsFiddle.~~

Edit: I see you've got your HTML up now. You'll need a .enlargeImage in each <td> if you want it to appear relative to the hovered image.

ok, thanks for help, I'm trying both now, but can't give the ' the '.enlargeImage' class because it will hide the image completely...I'll keep you posted. — webwrks, Feb 09 '11 at 19:29

score 0 · Accepted Answer · answered Feb 13 '11 at 00:58

0

Ok guys, I needed to use an each loop and qtip to get what I wanted...thanks for help:

$('.table_imageThumbs img').each(function(){
          $(this).qtip({

answered Feb 13 '11 at 00:58

webwrks

11,158
5
24
21

jQuery Image Hover on top of multiple dynamic images

3 Answers3

Linked