Member Avatar for vladacmba

Just to say hello again and to ask if someone knows what is the name of that Script at this site:

You'll see on rollover like in a eBay can show you image before you search the gallery.

I would ask if anyone can give me deeper explan... but I respect you privacy and DaniWeb Policy.

Thanks in advance!!!

  • 2 Contributors
  • 2 Replies
  • 118 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vladacmba

Dani AI

Generated

This effect is a simple image-preview-on-hover (often called a thumbnail-preview or image-tooltip). was pointing to that behaviour and was on the right track suggesting a JavaScript/jQuery approach. The typical pattern is: the thumbnail holds a link or a data attribute with the large-image URL, a tiny absolutely positioned container is created on demand, the large image is preloaded, and the container is shown near the cursor. Modern alternatives use small tooltip libraries, or plain vanilla JS without a full framework.

A small, practical jQuery pattern to adapt:

$(function(){
  var $preview;
  $(document).on('mouseenter focusin', '.thumb-preview', function(e){
    var src = $(this).data('preview') || $(this).attr('href');
    $preview = $preview || $('<div id="image-preview" style="position:absolute;display:none;z-index:9999"><img alt=""></div>').appendTo('body');
    var img = new Image();
    img.onload = function(){
      $preview.find('img').attr('src', src);
      $preview.css({left: e.pageX + 10, top: e.pageY + 10}).show();
    };
    img.src = src;
  }).on('mousemove', '.thumb-preview', function(e){
    $('#image-preview').css({left: e.pageX + 10, top: e.pageY + 10});
  }).on('mouseleave focusout', '.thumb-preview', function(){
    $('#image-preview').hide();
  });
});

Notes and cautions: preload images to avoid flicker, limit preview dimensions with CSS (max-width/max-height), and use delegated handlers for dynamic galleries. For accessibility add keyboard support (focusin/focusout) and keep the preview container aria-hidden for screen readers; do not rely on hover for core functionality. On touch devices replace hover with tap-to-open or a modal — CSS media queries like @media (hover: none) help detect non-hover devices.

If a ready-made solution is preferred, use a lightweight tooltip library or a modern small library. See jQuery and general event/mouse handling guidance on MDN - Events for implementation details.

Recommended Answers

All 2 Replies

Member Avatar for vladacmba

Thank You Guys!!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.