JavaScript - Enlarged Image Rollover

From NoskeWiki
Jump to navigation Jump to search
Basic interface of online conversion tool

About

NOTE: This page is a daughter page of: JavaScript


A simple JavaScript/HTML example where if you hover your mouse over an image thumbnail, a tooltip like popup appears, showing you a enlarged (full size if you wanted) version of that image appears. In this code it also follows the mouse, up until your cursor rolls out. This code was based on amazing code by "enzoferber" which you can interactively play with here. On my page I just added some comments and make sure it doesn't scroll off the page.


Simple Miles to Kilometers Converter

enlarged_image_rollover.html:

<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Enlarged Image Rollover</title>

  <style>
  div.imgTooltip {
    position: absolute;
  }

  .rolloverimg {
    width: 100px;
  }
  </style>
  
  <script src="enlarged_image_rollover.js"></script>
    
</head>
 
<body>

  <br>
  <img class="rolloverimg" id="thumb1" src="http://lorempixel.com/600/311/">
  <br>
  <img class="rolloverimg" id="thumb2" src="http://lorempixel.com/600/322/" align="right">

  <script>
  ImageHoverTooltips.addEnlargedImageTooltipOnHover('rolloverimg');
  </script>

</body>
</html>


<!-- CREDIT TO: http://jsfiddle.net/enzoferber/SyJsF/2/ -->

enlarged_image_rollover.js:

/*
 * A small collection of functions which can be used to display an enlarged
 * version of an image thumbnail when the mouse is over that thumbnail.
 * CREDIT TO: enzoferber, See: http://jsfiddle.net/enzoferber/SyJsF/2/
 */
var ImageHoverTooltips = {

/*
 * For all images with the matching `className`, will add listeners which
 * show a large size of the image when the mouse hovers over the image.
 * @param {string} className The class name to match.
 */
addEnlargedImageTooltipOnHover: function(className) {
  var images = document.getElementsByClassName(className);
  for (var i = 0; i < images.length; ++i) {
    var image = images[i];
    image.addEventListener('mouseover',
                           ImageHoverTooltips.mouseOverListener, false);
    image.addEventListener('mouseout',
                           ImageHoverTooltips.mouseOutListener, false);
  }
},

/*
 * Listener for mouse over our image.
 */
mouseOverListener: function(event) {
  ImageHoverTooltips.displayTooltip(this);
},

/*
 * Listener for mouse moving out of our image.
 */
mouseOutListener: function(event) {
  ImageHoverTooltips.hideTooltip(this);
},

/*
 * Displays a larger version of the image in a 'tooltip' style div
 * which follows the mouse.
 */
displayTooltip: function(imgLink) {
  var tooltip = document.createElement("div");
  var fullImg = document.createElement("img");

  fullImg.src = imgLink.src;
  fullImg.style.width = "400px";
  tooltip.appendChild(fullImg);
  tooltip.className = "imgTooltip";

  tooltip.style.top =  "60px";

  imgLink._tooltip = tooltip;
  ImageHoverTooltips._tooltip = tooltip;
  imgLink.parentNode.appendChild(tooltip);

  imgLink.addEventListener("mousemove",
                           ImageHoverTooltips.followMouse, false);
},

/*
 * Removes the enlarged image 'tooltip' div.
 */
hideTooltip : function(imgLink) {
  if (imgLink) {
    imgLink.parentNode.removeChild(imgLink._tooltip);
    imgLink._tooltip = null;
    ImageHoverTooltips._tooltip = null;
  }
},

/*
 * Returns the X coordinate of the mouse.
 */
mouseX: function(event) {
  if(!event) event = window.event;
  if(event.pageX) return event.pageX;
  else if(event.clientX)
    return event.clientX + (document.documentElement.scrollLeft ?
                document.documentElement.scrollLeft :
                document.body.scrollLeft);
  else return 0;
},

/*
 * Returns the Y coordinate of the mouse.
 */
mouseY: function(event) {
  if(!event) event = window.event;
  if(event.pageY) return event.pageY;
  else if(event.clientY)
    return event.clientY + (document.documentElement.scrollTop ?
                document.documentElement.scrollTop :
                document.body.scrollTop);
  else return 0;
},

/*
 * Makes our 'tooltip' follow the mouse.
 */
followMouse: function(event) {
  var tooltip = ImageHoverTooltips._tooltip.style;
  var offX = 15, offY = 15;
  var bufferWidth = 400 + offX;

  tooltip.left = (parseInt(ImageHoverTooltips.mouseX(event))+offX) + 'px';
  tooltip.top = (parseInt(ImageHoverTooltips.mouseY(event))+offY) + 'px';

  var browserWidth = window.innerWidth || document.body.clientWidth;
  var widthCutoff = browserWidth - bufferWidth;
  var x = parseInt(ImageHoverTooltips.mouseX(event))+offX;
  if (x > widthCutoff && browserWidth > bufferWidth) {
    tooltip.left = widthCutoff + 'px';
  }
}
};


Code license
For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)



See Also