This is the original picture

Faded edges

<img src="URL HERE" style="Filter: Alpha(Opacity=100,FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" align="left">

Black and white

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

Blurred

<IMG SRC="URL HERE" STYLE="filter:Blur(strength=30)">

Transparent

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

Resized image

<img src="URL HERE" height="70">

Upside-down

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

Mirror

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

Frame

<img style="border:#000000 2px outset" src="URL HERE">

Tumbnail (click)

<a target="_blank" href="URL HERE"><img src="URL HERE" height="80" width="80"></a>

mouse-over effects

From faded to colored

<style type="text/css"></p> <p>.gradualshine{ filter:alpha(opacity=30); -moz-opacity:0.3; }</p> <p></style></p> <p><script type="text/javascript"></p> <p>/*********************************************** * 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 ***********************************************/</p> <p>var baseopacity=30</p> <p>function slowhigh(which2){ imgobj=which2 browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : "" instantset(baseopacity) highlighting=setInterval("gradualfade(imgobj)",50) }</p> <p>function slowlow(which2){ cleartimer() instantset(baseopacity) }</p> <p>function instantset(degree){ if (browserdetect=="mozilla") imgobj.style.MozOpacity=degree/100 else if (browserdetect=="ie") imgobj.filters.alpha.opacity=degree }</p> <p>function cleartimer(){ if (window.highlighting) clearInterval(highlighting) }</p> <p>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) }</p> <p></script></p> <p><img class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)" src="URL HERE">

From gray to colored

<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> <!--</p> <p>#myimage{ filter:light }</p> <p>--> </style></p> <p><img id="myimage" src="URL HERE"></p> <p><script language="JavaScript1.2"></p> <p>//Image spotlight effect- By Erik F (die_schlampe@hotmail.com) //Code enhancements by Dynamicdrive.com //Visit http://www.dynamicdrive.com for this script</p> <p>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)</p> <p>////////////////////////////////////////////////////////////////// // No need to edit below this line // //////////////////////////////////////////////////////////////////</p> <p>var IE = document.all?true:false</p> <p>function moveL() { xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true); }</p> <p>if (IE&&myimage.filters) document.all.myimage.onmousemove = getMouseXY; var tempX = 0 var tempY = 0</p> <p>function getMouseXY(e) { tempX = event.offsetX tempY = event.offsetY</p> <p> if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} if (t) { moveL(); }</p> <p> return true }</p> <p>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) }</p> <p></script>

Drag picture around

<style> <!-- .drag{position:relative;cursor:se-resize} --> </style><br /> <script language="JavaScript1.2"> <!--</p> <p>/* Drag and Drop Script- � Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100\'s more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */</p> <p>var dragapproved=false var z,x,y function move(){ if (event.button==1&&dragapproved){ z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false } } function drags(){ if (!document.all) return if (event.srcElement.className=="drag"){ dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY document.onmousemove=move } } document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") //--> </script></p> <p><img src="URL HERE" class="drag">