plynulé vyfarbenie bitmapy

<div id="uvodnik_bigimg"><img src="img/index/uvodnik.jpg"></div>

#uvodnik_bigimg {
   width: 100%;
   overflow: hidden;
   position: relative;
   margin: 0px;
   padding: 0px;
}
#uvodnik_bigimg img {
   width:100%;
}

------------------------------ JS --------------------------

<script>
opacity = 0;

function E(el) {return document.getElementById(el);}

function onover(el) { show(el.id+"2") }
function onout(el) { hide(el.i+"2") }

function show(el){
  if(opacity < 101){ //dokým je viditeľnosť menšia ako 100%
    E(el).style.opacity = opacity/100; // nastav viditeľnosť
    if(typeof someHTMLElement.style.filter !='undefined' ){ //pre IE
     E(el).style.filter.alpha.opacity = opacity;
    }
    opacity += 5; //veľkosť kroku
    setTimeout("show(el)", 100); //rýchlosť
        }
  else {opacity = 0;} //ak je viditeľnosť 100 tak ju vynuluj
}
</script>


------------------- CSS ------------------

.noopacity {opacity: 0; filter: alpha(opacity=0);}

------------------- HTML -----------------

<div id="uvodnik_bigimg">
<img src="img/index/uvodnik.jpg" id="uvodnik" onmouseover="onover(this)" onmouseout="onout(this)">
<img src="img/index/uvodnik2.jpg" id="uvodnik2" class="noopacity"></div>

#uvodnik_bigimg img {
position: absolute;
top: 0px;
left: 0px;
width: 100%
}

#uvodnik {z-index: 1}
#uvodnik2{z-index: 2}

<script type="text/javascript">
function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it ivisible
    if(document.getElementById(id).style.opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacity(id, 100, 0, millisec);
    }
} 
</script>

#uvodnik_bigimg {
   width: 100%;
   height:1400px;
   overflow: hidden;
   position: relative;
   margin: 0px;
   padding: 0px;
   background-image: url(img/index/uvodnikbw.jpg);
   background-repeat: no-repeat;
   background-position: center top;
}
#uvodnik_bigimg2 {
   width: 100%;
   height:1400px;
   overflow: hidden;
   position: relative;
   margin: 0px;
   padding: 0px;
   background-image: url(img/index/uvodnik.jpg);
   background-repeat: no-repeat;
   background-position: center top;
   filter: Alpha(Opacity=0);   
   opacity: 0.0;
    -moz-opacity: 0.0;

}

<div id="uvodnik_bigimg">
<div id="uvodnik_bigimg2" onmouseover="javascript:shiftOpacity('uvodnik_bigimg2', 1000)" onmouseout="javascript:shiftOpacity('uvodnik_bigimg2', 1000)">

</div></div>