Full version: jsB@nk » Image » Multimedia Filters on Image
URL: https://www.javascriptbank.com/multimedia-filters-on-image.html
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).
Full version: jsB@nk » Image » Multimedia Filters on Image
URL: https://www.javascriptbank.com/multimedia-filters-on-image.html
<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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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> <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-->
