I have spent more then half of my programming life getting things to look the same in IE. I have decided that they will have to join the web to get things to work cause I will no longer program for them separately. If it looks good OK, but they don't get the bells and whistles.
For what asked, I have made two divs and change the ID to class so both will respond to the same command.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<div class="start" style="position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
<img src="http://www.tilnorsk.com/fade/rainforest1.jpg" />
</div >
<div class="start" style="position:absolute;left:420px;">
THE RAINFOREST
</div>
<div class="end" style="opacity:0;position:absolute;top:0;left:0;height:400px;width:400px;" onmouseover="doit();" onmouseout="jabby();">
<img src="http://www.tilnorsk.com/fade/rainforest2.jpg" />
</div >
<div class="end" style="opacity:0;position:absolute;left:420px;">
THE RAINFOREST<br />
There are many animals in the rainforest
</div>
<script>
function doit(){
$(".start").animate({opacity: "0"}, 2500);
$(".end").animate({opacity: "1"}, 2500);
}
function jabby(){
$(".end").animate({opacity: "0"}, 2500);
$(".start").animate({opacity: "1"}, 2500);
$(".end").css("opacity", "0");
$(".start").css("opacity", "1");
}
</script>
</body>
</html>