Javascript image tooltip on mouse hover function as the image preview when you hover mouse on the image. The image preview using javascript can be seen on many websites just like themeforest, sxc.hu, shutterstock and many others. The specialty of the tooltip is it will move to follow movement of the pointer , and can maintain its position in order to remain on the visible area in the yard that you do not experience problems while seeing it’s preview.
Here is how it will function
Javascript
( function (w, d) {
var tooltip = d.createElement ( 'div' ),
Noimage = "data: image / gif; base64, R0lGODlhAQABAIAAAAAAAP / / / yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" , / / 1 x 1 pixel transparent GIF
top = 0 ,
left = 0 ,
docWidth = 0 ,
docHeight = 0 ,
offsetTop = 20 , / / Default top distance of the tooltip to the mouse pointer
offsetLeft = 20 , / / Default left distance of the tooltip to the mouse pointer
wait = null ;
/ / Get the correct width of the document without scrollbars
function getDocWidth () {
return d.documentElement.clientWidth;
}
/ / Get the correct height of the document
function getDocHeight () {
return Math.max (
d.body.scrollHeight, d.documentElement.scrollHeight,
d.body.offsetHeight, d.documentElement.offsetHeight,
d.body.clientHeight, d.documentElement.clientHeight
);
}
tooltip.id = "trail-image" ;
tooltip.className = "trail-image" ;
tooltip.innerHTML = '<img src = "' + Noimage + '"alt =" Loading ... "
/ / Just like `DOMContentLoaded` event, but only to
/ / wait for the existence of the `<body>` element
/ / to insert the tooltip markup in the proper area
function waitForBodyExist () {
if (! d.body) {
wait = setTimeout (waitForBodyExist, 100 );
} else {
clearTimeout (wait);
d.body.appendChild (tooltip);
docWidth = getDocWidth ();
docHeight = getDocHeight ();
w.onresize = function () {
docWidth = getDocWidth ();
docHeight = getDocHeight ();
};
w.onscroll = hideTrail;
}
/ / Console.log ('Still waiting ...');
WaitForBodyExist} ();
/ / Function to show the tooltip
/ / `width '=> the tooltip width
/ / `height '=> the tooltip height
/ / `file` => the URL of the image to show
function showTrail (width, height, file) {
tooltip.style.visibility = "visible" ;
tooltip.children [ 0 ]. src = file;
tooltip.style.width = parseInt (width, 10 ) + "px" ;
tooltip.style.height = parseInt (height, 10 ) + "px" ;
d.onmousemove = function (e) {
if (! e) e = w.event;
if (e.pageX | | e.pageY) {
left = e.pageX;
top = e.pageY;
} else if (e.clientX | | e.clientY) {
left = e.clientX + + d.body.scrollLeft d.documentElement.scrollLeft;
top = e.clientY + + d.body.scrollTop d.documentElement.scrollTop;
}
tooltip.style.top = parseInt (((top> = docHeight - (offsetTop + height + 10 ))? top - (height + offsetTop): + offsetTop top), 10 ) + "px" ;
tooltip.style.left = parseInt (((left> = docWidth - (offsetLeft + width + 10 ))? left - (width + offsetLeft): + offsetLeft left), 10 ) + "px" ;
};
}
/ / Function to hide the tooltip
function hideTrail () {
d.onmousemove = "" ;
tooltip.style.top = "-9999px" ;
tooltip.style.left = "-9999px" ;
tooltip.style.visibility = "hidden" ;
tooltip.children [ 0 ]. src = Noimage;
docWidth = getDocWidth ();
docHeight = getDocHeight ();
}
/ / Add to the window object as an external / global function
w.showTrail = showTrail;
w.hideTrail = hideTrail;
}) (Window, document);
CSS
/* Image Trail Tooltip CSS */
.trail-image {
width:0;
height:0;
background-color:#ddd;
border:1px solid #888;
position:absolute;
top:-9999px;
left:-9999px;
z-index:9999;
visibility:hidden;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.2);
}
Implementation/usage
There are two main functions in the script above, namely
showTrail and hideTrail . showTrail used to display a tooltip while hideTrail
used to hide it. You can apply it to the attribute onmouseover and onmouseout
like this:
<a href="img/large.jpg"> <img onmouseover="showTrail(250, 100, 'img/medium.jpg');" onmouseout="hideTrail();" src="img/small.jpg" alt=""> </a>
Specify the width and height of the new image on the
parameters width and height as well as the URL you want to display a new image
on the parameter file.
Credit: http://www.dte.web.id
0 comments:
Post a Comment