Load an image when mouseover on its link

Hello guys

I can't explain clearly what I mean but please visit this site.
Okay, you're in now mouseover on a link https://i.imgur.com/6OiOTQK.gif - you see it?

I'm asking for help to make a script that can let user to view an image from a link without using BBCode or HTML.

Code:

Filter :
Any file type should work : *.jpg, *.png, *.gif (can add more if possible)
Any image hosting should work : *imgur.com, *servimg.com, *tinypic.com, *postimages.org (only direct link supported)


Images won't load till user mouseover on its link, except image links already inside a BBCode or HTML tag.

Code:

Accepted : http://i.imgur.com/6OiOTQK.gif

Script won't work if meet conditions below

Code:

Unaccepted :
[img]http://i.imgur.com/6OiOTQK.gif[/img] or
<img src="http://i.imgur.com/6OiOTQK.gif" />

Thank you for reading.

i think you want a tooltip on img link but
instead of a text you want the image to be loaded
like this gif

if so i am so interested in this
i hope someone code it for you

i am so interested in this

Check this javascript.

Code:

/* Image Tooltip v1.0.1 (PunBB) */
 
$(function() {
  $('.post-entry a').filter(function(){
    this.addEventListener("mouseover", function(){ createImageTooltip(this) });
    this.addEventListener("mouseout", function(){ removeImageTooltip() });
  });
  $('head').append('<style type="text/css">' +
      '.postimage-tooltip {' +
        'border: solid 2px #536482;' +
        'z-index: 999;' +
      '}' +
      '.postimage-tooltip img {' +
        'border: solid 1px #ffffff;' +
      '}' +
  '</style>');
});
 
function createImageTooltip(data){
  if (/.(bmp|webp|png|jpg|gif)$/.test(data.href) && (!/<img/.test(data.innerHTML))){
    var max_width = 192; // Set here the tooltip max width
    var tooltip = $('<div class="postimage-tooltip"><img src="' + data.href +
                    '" style="max-width:' + max_width + 'px" /></div>')[0];
    var offset = $(data).offset();
    $(tooltip).css({
      position: 'absolute',
      display: 'inline-block'
    });
    data.before(tooltip);
    $('.postimage-tooltip').filter(function(){
      $(this).css ({ transform: 'translateY(-' + (this.offsetHeight +  + 'px)' });
    });
  }
}
 
function removeImageTooltip(){
  $('.postimage-tooltip').filter(function(){
    this.remove();
  });
}

Title: Image Tooltip
Placement: In all the pages

Thank you so much, Wecoc! But there was a problem appear when I was trying hover on an image link, seem it related to position:absolute and top value.

Here is the link

Please post a link to a post that contains this and that guests can see.

Try this instead. I tested in your forum console and it seems to be working.

Code:

/* Image Tooltip v1.0 (Edit) */

$(function() {
  $('.vglnk').filter(function(){
    this.addEventListener("mouseover", function(){ createImageTooltip(this) });
    this.addEventListener("mouseout", function(){ removeImageTooltip() });
  });
  $('head').append('<style type="text/css">' +
      '.postimage-tooltip {' +
        'border: solid 2px #536482;' +
        'z-index: 999;' +
      '}' +
      '.postimage-tooltip img {' +
        'border: solid 1px #ffffff;' +
      '}' +
  '</style>');
});
 
function createImageTooltip(data){
  if (/.(png|jpg|gif)$/.test(data.href) && (!/<img/.test(data.innerHTML))){
    var max_width = 192; // Set here the tooltip max width
    var tooltip = $('<div class="postimage-tooltip"><img src="' + data.href +
                    '" style="max-width:' + max_width + 'px" /></div>')[0];
    var offset = $(data).offset();
    $(tooltip).css({
      position: 'absolute',
      display: 'inline-block'
    });
    data.before(tooltip);
    $('.postimage-tooltip').filter(function(){
      $(this).css ({ transform: 'translateY(-' + (this.offsetHeight + 8) + 'px)' });
    });
  }
}
 
function removeImageTooltip(){
  $('.postimage-tooltip').filter(function(){
    this.remove();
  });
}

I only changed

Code: $('.post-entry a')

to

Code: $('.vglnk')

To use this code in other versions (phpBB2, etc) probably the only thing you have to change is that same thing.
Also you can change the max width of the tooltip in this line

Code: var max_width = 192;

The height is changed automatically to preserve the ratio.

You've made my day!
Thank you @Wecoc