Images

Make your webpage more interesting

Just copy the codes in the boxes and paste them where you want your image to be, change the capitals to your image's source.

Original Image

Transparent

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

Border around image

<IMG style="background:#COLOR;border:#COLOR 4px outset" src="PICTURE URL">

Black and white-->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>

Transparent-->original on mouseover

<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="PICTURE URL">

Faded edges

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

Marquee

<MARQUEE behavior="alternate"><MARQUEE width="200"><IMG src="PICTURE URL"><IMG src="PICTURE URL"><IMG src="PICTURE URL"></MARQUEE></MARQUEE>

Picture change on mouseover

<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="PICTURE URL 1" NAME="home" ALT="" BORDER="0"></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("PICTURE URL 2"); //--> </SCRIPT>