Image Effects

Transparent:

<IMG src="IMAGE URL HERE" style="filter:alpha(opacity=50)">


Up-side down:

<img src="IMAGE URL HERE" border="0" style="filter:flipv">


Greyscale:

<img src="IMAGE URL HERE" id="GRAY" border="0" style="align:center; width:?px; height:?px; filter:gray">


Fade-Left:

<img src="IMAGE URL HERE" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100, StartY=100, FinishX=0, FinishY=100)">


Fade-Top:

<img src="IMAGE URL HERE" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100, StartY=100, FinishX=100, FinishY=0)">


Fade-Bottom:

<img src="IMAGE URL HERE" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=100, StartY=0, FinishX=100, FinishY=100)">


Fade-Right:

<img src="IMAGE URL HERE" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=100, FinishX=100, FinishY=100)">


Fade-Right'corner':

<IMG src="IMAGE URL HERE" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=80, FinishY=80)" align="center">


Fade-Left'corner':

<IMG src="IMAGE URL HERE" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=80, StartY=80, FinishX=0, FinishY=0)" align="center">

Mouse-Overs

Pixelated:

<!-- begin code provided by createblog.com --> <script language=JavaScript> function ejs_img_fx(img){ if(img && img.filters && img.filters[0]){ img.filters[0].apply(); img.filters[0].play(); } } </script> <IMG onmouseover="ejs_img_fx(this)" style="FILTER: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=3,Duration=1)" src="IMAGE URL HERE" onload="ejs_img_fx(this)" border="0"> <!-- end code provided by createblog.com -->


Faded to Full opticaly:

<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="IMAGE URL HERE">


Spotlight:

<style> <!-- #myimage{ filter:light } --> </style> <img id="myimage" src="IMAGE 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>


Greyscale to Clear:

<IMG src="IMAGE 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>