for the search, my way to preload images! haha

ATTENTION:: These are old tutorials, click on the tutorials link right above this to see the newest tutorials

Image Filters for Internet Explorer

re-written by John Found on xentrik.net

This is one of the most commonly asked questions for how to change the look of some images / text on your page. The following codes ONLY WORK IN Internet Explorer. I have an example of how each code would look right above the code, so you can kinda get an understanding there.The first image below is what it looks like normally without anything applied to it.

Sample Image Filters Alpha Filters, side transparentcy Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All images, the following goes between your Style Tags
img {filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);}
Alpha Filters, circle transparentcy Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All images, the following goes between your Style Tags
img {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);}
Alpha Filters, square transparentcy Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All images, the following goes between your Style Tags
img {filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);}
Blur Filters Sample Image Filters

the direction=number below in the code goes by the following chart..

0 = top
45 = top right
90 = right
135 = bottom right
180 = bottom
225 = bottom left
270 = left
315 = top left

The strength=number below is how disorted it will look. Make the number higher to have more pixels.

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:blur(add=0, direction=200, strength=5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:blur(add=0, direction=200, strength=5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:blur(add=0, direction=200, strength=5)}

All images, the following goes between your Style Tags
img {filter:blur(add=0, direction=200, strength=5);}
FlipV Filters Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:flipv;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:flipv;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:flipv);}

All images, the following goes between your Style Tags
img {filter:flipv;}
FlipH Filters Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:fliph;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:fliph;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:fliph);}

All images, the following goes between your Style Tags
img {filter:fliph;}
XRay Filters Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:xray;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:xray;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:xray);}

All images, the following goes between your Style Tags
img {filter:xray;}
Invert Filters Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:invert;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:invert;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:invert);}

All images, the following goes between your Style Tags
img {filter:invert;}
Grayscale Filters Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:gray;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:gray;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:gray;}

All images, the following goes between your Style Tags
img {filter:gray;}
Wave Filters Sample Image Filters
Apply it to just one image
<img src="http://url.to/pic.gif" style="filter: wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter: wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);}

All images, the following goes between your Style Tags
img {filter: wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);}
Chroma Filters Sample Image Filters

The chroma filter allows you to make a color of the image transparent. If you're using the code on myspace, then it may or may not work because of myspace filtering the # sign. If you are using it for myspace, take out that sign before trying it. For the color=#E666D5 you'll have to change the HEX value there to the color you would like to be transparent within that image.

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:chroma(color=#E666D5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:chroma(color=#E666D5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:chroma(color=#E666D5);}

All images, the following goes between your Style Tags
img {filter:chroma(color=#E666D5);}
DropShadow Filters Sample Image Filters

In the above image I applied a chroma filter, and a drop shadow filter because for the drop shadow filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) dropshadow(color=#00FF00, offx=10, offy=10);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:dropshadow(color=#00FF00, offx=5, offy=5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:dropshadow(color=#00FF00, offx=5, offy=5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:dropshadow(color=#00FF00, offx=5, offy=5);}

All images, the following goes between your Style Tags
img {filter:dropshadow(color=#00FF00, offx=5, offy=5);}
Shadow Filters Sample Image Filters

In the above image I applied a chroma filter, and a shadow filter because for the shadow filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) shadow(color=#9BAD71, direction=225);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:shadow(color=#9BAD71, direction=225);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:shadow(color=#9BAD71, direction=225);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:shadow(color=#9BAD71, direction=225);}

All images, the following goes between your Style Tags
img {filter:shadow(color=#9BAD71, direction=225);}
Glow Filters Sample Image Filters

In the above image I applied a chroma filter, and a glow filter because for the glow filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) glow(color=#6E9DD4, strength=7);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:glow(color=#6E9DD4, strength=7);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:glow(color=#6E9DD4, strength=7);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:glow(color=#6E9DD4, strength=7);}

All images, the following goes between your Style Tags
img {filter:glow(color=#6E9DD4, strength=7);}
Mask Filters Sample Image Filters

In the above image I applied a chroma filter, and a mask filter because for the mask filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) mask(color=#E666D5);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter: mask(color=#E666D5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter: mask(color=#E666D5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter: mask(color=#E666D5);}

All images, the following goes between your Style Tags
img {filter: mask(color=#E666D5);}