Image Hover Effects

All you need to do is hover over (put your mouse over) the image. And if you want to use the effect, then just copy and paste the code below the effect image example and where it says ''IMAGE URL'' simply paste in the url of your image.
So here's the original image that i've made that's going to be the example:


Faded to coloured:

<style type="text/css"> .gradualshine{ filter:alpha(opacity=30); -moz-opacity:0.3; } </style> <script type="text/javascript"> /*********************************************** * Gradual Highlight image script- ?Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var baseopacity=30 function slowhigh(which2){ imgobj=which2 browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : "" instantset(baseopacity) highlighting=setInterval("gradualfade(imgobj)",50) } function slowlow(which2){ cleartimer() instantset(baseopacity) } function instantset(degree){ if (browserdetect=="mozilla") imgobj.style.MozOpacity=degree/100 else if (browserdetect=="ie") imgobj.filters.alpha.opacity=degree } function cleartimer(){ if (window.highlighting) clearInterval(highlighting) } function gradualfade(cur2){ if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (window.highlighting) clearInterval(highlighting) } </script> <img class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)" src="URL HERE">

Black & white to coloured:

<IMG src="URL HERE" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'" a>

Spotlight:

<style> <!-- #myimage{ filter:light } --> </style> <img id="myimage" src="URL HERE"> <script language="JavaScript1.2"> //Image spotlight effect- By Erik F (die_schlampe@hotmail.com) //Code enhancements by Dynamicdrive.com //Visit http://www.dynamicdrive.com for this script s = 50; // the size of the spotlight vp = 10; // the visibility percent of the picture startx = 0; // the top position of your sportlight into the image (on start) starty = 0; // the left position of your spotlight into the image (on start) ////////////////////////////////////////////////////////////////// // No need to edit below this line // ////////////////////////////////////////////////////////////////// var IE = document.all?true:false function moveL() { xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true); } if (IE&&myimage.filters) document.all.myimage.onmousemove = getMouseXY; var tempX = 0 var tempY = 0 function getMouseXY(e) { tempX = event.offsetX tempY = event.offsetY if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} if (t) { moveL(); } return true } var xv = startx; var yv = starty; var t= true; if (IE&&myimage.filters){ myimage.style.cursor="hand"; myimage.filters.light.addAmbient(255,255,255,vp) myimage.filters.light.addPoint(startx,starty,s,255,255,255,255) } </script>

« BACK HOME FORWARD »

Aiza | Claire | Gillian | Katie | Keeley | Kelci | Linda | Roisin | Vibeke |
More/Apply

BEAUTIFULMISTAKES.NET 2007-2008