Try this:
<html xmlns="http://www.w3.org/1999/xhtml";><head>
<script type="text/javascript" src="pagetest3b_files/jquery.min.js"></
script>
<script type="text/javascript">
$(document).ready(function() {
$("#area2").hide();
$("#button2").click(function() {
$("#area1").fadeOut(1500,function(){
$("#area2").fadeIn(1500);
});
});
$("#button1").click(function() {
$("#area2").fadeOut(1500,function(){
$("#area1").fadeIn(1500);
});
});
});
</script>
</head><body>
<div id="box">
<div class="fadeinarea">
<div id="area1">
<img src="pagetest3b_files/poster_thumb1b.gif" />
</div>
<div id="area2">
<img src="pagetest3b_files/poster_thumb2b.gif" />
</div>
</div>
<div id="buttonstofade">
<center><span class="fadebutton"><a id="button1" href="#">First
Content Area</a></span></center>
<center><span class="fadebutton"><a id="button2" href="#">Second
Content Area</a></span></center>
</div>
</body></html>
