« »

IE 4 and above support cool visual controls called filters, which are built-in multimedia effects you can instantly apply to your page images (among other elements).

Label: Multimedia Filters on Image

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
HTML
Print

Copy All x2

<DIV align=center id=desc style="font-weight: bold;">Filters on image. Click these filters below to affect<BR><SPAN id=fcode>no filter applied</SPAN></DIV><BR><SPAN id=flink 
onclick="theImg.style.filter='alpha(opacity=50,)'; desc.innerHTML='Alpha: alters the opacity of an object, allowing it to blend with the background.<br><span id=fcode>filter: alpha(opacity=50)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>alpha</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='blur(direction=45, strength=5, add=0)'; desc.innerHTML='Motion Blur: blurs an object with the direction and strength specified.<br><span id=fcode>filter: blur(direction=45, strength=5, add=0)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>blur</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='dropshadow(offx=-4, offy=3, color=#9cf)'; desc.innerHTML='Drop Shadow: creates a shadow of the object at a specified x-y offset and color.<br><span id=fcode>filter: dropshadow(offx=-4, offy=3, color=#9cf)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>dropShadow</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='fliph()'; desc.innerHTML='Flip Horizontal: flips the visible pixels in the horizontal axis.<br><span id=fcode>filter: fliph()</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>flipH</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='flipv()'; desc.innerHTML='Flip Vertical: flips the visible pixels in the vertical axis.<br><span id=fcode>filter: flipv()</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>flipV</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='glow(strength=3, color=orange)'; desc.innerHTML='Glow: creates a glow around the opaque pixels of an object.<br><span id=fcode>filter: glow(strength=3, color=orange)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>glow</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='gray()'; desc.innerHTML='Grayscale: converts the visible pixels to 256 shades of gray.<br><span id=fcode>filter: gray()</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>gray</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='invert()'; desc.innerHTML='Invert: maps the pixels to their opposite value in the color spectrum.<br><span id=fcode>filter: invert()</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>invert</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='mask(color=olive)'; desc.innerHTML='Mask: turns transparent pixels to a specified color and opaque pixels transparent.<br><span id=fcode>filter: mask(color=olive)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>mask</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='shadow(color=silver, direction=135)'; desc.innerHTML='Shadow: creates an attenuated shadow in the direction and color specified.<br><span id=fcode>filter: shadow(color=silver, direction=135)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>shadow</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='wave(freq=4, strength=9, phase=0, lightstrength=0, add=0)'; desc.innerHTML='Wave: applies a sine wave deformation to an object.<br><span id=fcode>filter: wave(freq=4, strength=9, phase=0, lightstrength=0, add=0)</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>wave</SPAN>&nbsp; <SPAN id=flink 
onclick="theImg.style.filter='xray()'; desc.innerHTML='Xray: grayscales and flattens the color depth.<br><span id=fcode>filter: xray()</span>';" 
onmouseout="this.style.color='0000ff'" onmouseover="this.style.color='red'" 
;>xray</A></SPAN>

<DIV></DIV><BR>
<DIV align=center id=theImg style="WIDTH: 100%">
<IMG hspace=10 src="../image/homer.jpg"
vspace=10 width="256" height="385"></A> <BR><BUTTON 
onclick="theImg.style.filter=''; desc.innerHTML='Click on the links below to apply a filter and see the filter syntax.<br><span id=fcode>no filter applied</span>';">
Clear Filter</BUTTON>
</DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->