javascript:
window.onload = function()
{
opacity('container', 49, 50, 100, 'images/2.jpg');
opacity('container1', 49, 50, 100, 'images/1.jpg');
}
function swap(opacity, id,img_src)
{
document[id].src=img_src;
}
function opacity(id, opacStart, opacEnd, millisec, img_src) {
//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 + "','" + img_src + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "','" + img_src + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id, img_src) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
swap(opacity, id, img_src);
}
html:
<body>
<img id="container" src="images/2.jpg" width="100" height="100" border="0" onmouseover="opacity('container', 50, 100, 500, 'images/1.jpg');" onmouseout="opacity('container', 100, 50, 500, 'images/2.jpg');" style="cursor:pointer;" />
<img id="container1" src="images/1.jpg" width="100" height="100" border="0" onmouseover="opacity('container1', 50, 100, 500, 'images/2.jpg');" onmouseout="opacity('container1', 100, 50, 500, 'images/1.jpg');" style="cursor:pointer;" />
</body>
it works in opera but not working in IE
