Hi all

I am making a small list over some products, and to each product there are shown a picture to the left. When the user moves their mouse over the thumbnail image, I would like to show four more images with jQuery. I have looked at this very nice plugin: http://flowplayer.org/tools/demos/tooltip/any-html.html This could be used to show a html-div containing the four images.

My only problem is that I would like the four "tooltip/popup" images to move around when the user moves the mouse around on top of the main-thumbnail.

Is this possible, or does anyone else have a good idea to a plugin or something that could solve my problem.

Please help.

Best regards, Kim Andersen

3 answers

1
point
This was chosen as the best answer

this is fairly easy to do. But are the pictures static? or do they get loaded from an external source? (dbase, xml etc?) Ive made this a while ago (only with 1 image in a div, but hell, if you can css, you can put anything in it ;)

(function($) {
$(document).ready(function(){
    /* Config */
    xOffset = 10;
    yOffset = 30;

    $("div.box h3").hover(function(e){
        img_src = $(this).attr('rel');
        $("body").append("<p id='imageTooltip'><img src='"+img_src+".jpg' alt='#' /></p>");
        $("#imageTooltip")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .css("z-index", "99")
            .fadeIn("fast");        
    }, function(){
    $("#imageTooltip").remove();
    });
    $("div.box h3").mousemove(function(e){
        $("#imageTooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
});
})(jQuery)

CSS for #imageTooltip

#imageTooltip
{
    position:absolute;
    border:1px solid #ff7c00;
    display:none;
    height:100px;
    width:80px;
}

What this did was the following: My page was filled dynamicly, and in the rel attribute of the h3 i put the uri to the image i needed to display, then i created a <p> which has an img as a child. the image source came from the rel attribute. then just position the <p> ( div in your case) and fade it in. the z-index is so itll be always on top. the mousemove makes sure the tooltip moves around with the mouse.

this was my jquery put in an external js file. Let me know if you need more info. (i used a <p> tag, but ofcourse you can use a <div> tag as well)

Answered over 9 years ago by Menno Geelen
  • Would that work on a span as well? Kyle Sevenoaks over 9 years ago
  • ofcourse, just add the tag you want to use in the jquery, if you uise the absolute positioning it should work for any tag. in this line `$("body").append("<p id='imageTooltip'><img src='"+img_src+".jpg' alt='#' /></p>");` just make sure you have set the style so that it is absolute positioned Menno Geelen over 9 years ago
  • I'm gonna try this out!! I have a really simple CSS span tooltip and it would be great to add a bit of mouseplay to it! Kyle Sevenoaks over 9 years ago
  • Yeah, I can't get it to work. My JS-Query fu sucks :P Kyle Sevenoaks over 9 years ago
  • whats going wrong kyle? screenshots? code? :P Menno Geelen over 9 years ago
0
points

Actually my code looks similar to this:

<td class="image">
   <img src="myThumb.jpg"/>
   <div class="extraImages">
      <img src="img1.jpg"/>
      <img src="img2.jpg"/>
      <img src="img3.jpg"/>
      <img src="img4.jpg"/>
   </div>
</td>

The .extraImages is hidden by my css, and when I hover the myThumb.jpg, i need to show the .extraImages like I wrote about i the first post.

Answered over 9 years ago by Kim Andersen
  • So I'm not cuite sure how to accomplish this, with the code you provided before Menno? Kim Andersen over 9 years ago
  • first of al, you have a table in your html? ;P not very nice, or is it really tabular data? second, whats going wrong? did you add the jquery lib? If i got it right you want to show 4 more images on the hover of one of those images? is that right? Menno Geelen over 9 years ago
0
points
<td class="image">
<img src="myThumb.jpg"/>
<div class="extraImages">
  <img src="img1.jpg"/>
  <img src="img2.jpg"/>
  <img src="img3.jpg"/>
  <img src="img4.jpg"/>
</div>
</td>

Ok, so what you need to do, is let the javascript generate the extraImages div. You can just copy my js, and replace

$("body").append("<p id='imageTooltip'><img src='"+img_src+".jpg' alt='#' /></p>");

with:

$("body").append('<div class="extraImages"><img src="img1.jpg"/><img src="img2.jpg"/><img src="img3.jpg"/><img src="img4.jpg"/></div>');

If its static, if not, you need to find a way to pass the 4 img urls to the Jquery function, for only one i used the rel attribute, i dont know if you can pass more than one in one attribute, else you need to make a hidden field for each Thumb, and in that hidden field you write the 4 image sources, then with jquery yuou can get them out of the hidden field

EDIT: hahaha and ofcourse you need to repelace some selectors, and strip out what you arnet using. How are your JQuery skills? http://jqueryfordesigners.com/ ← Very good jquery tutorials

Answered over 9 years ago by Menno Geelen