Image Effects

faded edges

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

colour on hover

<img src="PIC 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>

light follows cursor

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

faded to normal

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

image border

<img style="border:#COLOR 6px outset" src="picture" url>

black & white image

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

invert colours

<img src="picture URL" border="0" style="filter:invert">

upside down

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

transparent//translucent

<img src="picture URL" style="filter:alpha(opacity=50)">

Marquee


<marquee behavior="alternate"><marquee width="200"> <img src="PIC URL"> <img src="PIC URL"> <img src="PIC URL"></marquee></marquee>

colour on mouseover

<img src="picture URL" 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>

fade to colour on mouseover

<img src="PIC URL" style="filter:alpha(opacity=40)" onmouseover="nereidFade(this,100,70,20)" onmouseout="nereidFade(this,20,50,10)">

thumbnail image

<a target="_blank" href="picture URL"><img src="picture URL" height="50" width="50"></a>

resizing a picture

<img src="PIC URL HERE" width="50" height="50">

dragable image

<style> <!-- .drag{position:relative;cursor:hand} --> </style> <script language="JavaScript1.2"> <!-- /* 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 */ 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> <img src="URL HERE" class="drag">

light follows image

<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>

one image to another

<script TYPE="text/javascript"> <!-- // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but please keep this // notice with the code. var rollOverArr=new Array(); function setrollover(OverImgSrc,pageImageName) { if (! document.images)return; if (pageImageName == null) pageImageName = document.images[document.images.length-1].name; rollOverArr[pageImageName]=new Object; rollOverArr[pageImageName].overImg = new Image; rollOverArr[pageImageName].overImg.src=OverImgSrc; } function rollover(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; if (! rollOverArr[pageImageName].outImg) { rollOverArr[pageImageName].outImg = new Image; rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src; } document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src; } function rollout(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src; } //--> </script> <A HREF="" onMouseOver="rollover('home')" onMouseOut="rollout('home')"><IMG SRC="IMAGE 1 GOES HERE!" NAME="home" ALT="" BORDER="0"></A> <script TYPE="text/javascript"> <!-- setrollover("IMAGE 2 GOES HERE!"); //--> </script>

Back // Forward
Copyright (C) kute-kandy.com. All rights reserved.