Full version: jsB@nk » Framework » jQuery » Fading Objects onmouseover
URL: https://www.javascriptbank.com/fading-objects-onmouseover.html
With this free JavaScript code, you will easily apply fading effect to any HTML element when the mouse move over it, by adding a special CSS class name to the element and done. The code is very easy to use and custom. Move mouse over now to feel it!
Full version: jsB@nk » Framework » jQuery » Fading Objects onmouseover
URL: https://www.javascriptbank.com/fading-objects-onmouseover.html
<style type="text/css">#overlappopup{ /*don't change id name */position: absolute; /*don't change position property */z-index: 1000;background: white;border: 12px solid black;padding: 10px;left: 0;top: 0;visibility: hidden;}</style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript" name="overlapviewer.js">/************************************************ Overlap Image Viewer script- by JavaScript Kit (www.javascriptkit.com)* This notice must stay intact for usage* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more***********************************************///Overlap Image Viewer (March 2nd, 08'): By JavaScript Kit: http://www.javascriptkit.comvar overlapviewer={thumbclass: "jkimagelarge", //Shared css class name to apply efect tostartopacity: 1, //Opacity of element before mouse moves over itendopacity: 0.5, //Opacity of element when mouse is over it (and showing enlarged image)increment: 0.1, //Amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)loadingmsg: "Loading Image. Please Wait...",isContained:function(m, e){var e=window.event || evar c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)while (c && c!=m)try {c=c.parentNode} catch(e){c=m}if (c==m)return trueelsereturn false},dim_and_reveal:function(e, t, config){var windowsize={w: $(window).width(), h: $(window).height()}var scrollpoint={x: e.pageX-e.clientX, y: e.pageY-e.clientY}$(t).fadeTo('normal', overlapviewer.endopacity, function(){config.$popupdiv.html('<img id="jkpopupimage" src="'+t.getAttribute('targetimage')+'" border="0" />')var isimglink=t.childNodes.length==1 && t.firstChild.tagName=="IMG" //see if anchor object is image linkvar $target=(isimglink)? $(t.firstChild) : $(t)var targetcoord=$target.offset()$('#jkpopupimage').one('load', function(){var popupdiv=config.$popupdiv.get(0)targetcoord.left=(windowsize.w < targetcoord.left-scrollpoint.x+popupdiv.offsetWidth)? targetcoord.left-popupdiv.offsetWidth+$target.width() : targetcoord.leftconfig.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible'})})})},undim_and_hide:function(e, t, config){$(t).fadeTo('normal', overlapviewer.startopacity)config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})},init:function(config){$(document).ready(function(){config.$thumbnails=$('.'+overlapviewer.thumbclass)config.$popupdiv=$('<div id="overlappopup"></div>').prependTo('body')config.$thumbnails.each(function(index){$(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute$(this).bind('mouseenter', function(e){if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up divoverlapviewer.dim_and_reveal(e, this, config)})$(this).bind('mouseleave', function(e){if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up divoverlapviewer.undim_and_hide(e, this, config)})}) //end each loopconfig.$popupdiv.bind('mouseleave', function(e){config.$thumbnails.stop().fadeTo('normal', overlapviewer.startopacity)config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})})}) //end document.ready}}overlapviewer.init({})/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><center><a href="http://www.javascriptbank.com/" class="jkimagelarge" title="">Free Javascript Codes Downloads</a><br /><br /><br /><img style="opacity: 1;" targetimage="/logos/logo_jsb_120x60.jpg" src="/logos/logo_jsb_120x60.jpg" class="jkimagelarge" title="" border="0" width="120" height="60"></center>
/javascript/jquery.js