Motorola RIZR Z8 Ferrari Quad-Band, 2 MP Camera, MP3 Player and MicroSD Slot
Apple iPod nano 8 GB Pembe
Samsung SL30 10MP Digital Camera with 3x Optical Zoom and 2.5 inch LCD
Motorola A1200 MING Smartphone
:: HOME HTML IE Filters
IE Filters

I want to mention about a useful tools which you can just use with internet explorer. filters help you to apply a special effects to an object or page to change its appearance. The bad thing is that it works just with internet explorer. You can use filters just with div and span elements, inline images, form elements and table elements.


Below i show 2 examples and you can also check this script to create filter for what you want.

Click Here To View IE Filter Script

For example, When you want to roll-over menu like when you move your mouse over it, it changes its color or whatever. For that, you need to use JavaScript if it is image. But with iie filters, you can make it with simple way.


<img src="ourimage.jpg"  onMouseOver="'Alpha(Opacity=90, FinishOpacity=50, Style=4, StartX=100, StartY=100, FinishX=100, FinishY=0); ';" onMouseOut="'';">


Just try this example and see the differences.

Also you can see some navigation that when you move your mouse over it, it pulls down slowly. You can do that with extra JavaScript code or you can use ie filters for like:


<style type="text/CSS">
    .Menu {visibility: hidden}
    .menuMOver {visibility: hidden}
    .Menu {filter:progid:DXImageTransform.Microsoft.DropShadow(color=#999999, offX=0, offY=0)
                progid:DXImageTransform.Microsoft.Blinds(direction=down, bands=1)}
<script type="text/JavaScript">
    var ActiveMenu = null;
    var ActMenu = null;
    function hideActive() {
        if(ActiveMenu!== null) {
            ActiveMenu = null;
    function popMenu(M) {
        ActiveMenu = document.getElementById(M);
        if(ActiveMenu.filters) ActiveMenu.filters[1].apply();
        if(ActiveMenu.filters) ActiveMenu.filters[1].play(0.5);
    function hideIt(object) {"hidden";
    function showIt(object) {"visible";
    function hideObj(div) {
        document.getElementById(div).style.visibility = "hidden";

<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onClick="hideActive();">
<div id="myMenu" class="Menu">
   <a href="1.HTML">1</a>
   <a href="2.HTML">2</a>

       <div class="menuDiv">
            <div class="menuCol" onMouseOver="popMenu('myMenu');"><a href="#">LINK</a></div>