<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><//script>');</script>
<stytle>
#tabs{ padding:.5em;}
#tabs:after
{
content:"."; visibility:hidden; display:block;
clear:both; height:0;
}
#tabs li{ float:left;}
active{font-weight:bold;}
</stytle>
<body>
<div id="panes" >
<div><table><tr><td><img src="1.jpg" class="style5" height="300" width="300" /></td></tr></table></div>
<div><table><tr><td><img src="2.jpg" class="style5" height="300" width="300" /></td></tr></table></div>
<div><table><tr><td><img src="3.jpg" class="style5" height="300" width="300" /></td></tr></table></div>
<div><table><tr><td><img src="4.jpg" class="style5" height="300" width="300" /></td></tr></table></div>
<ul id="tabs" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script language="javascript">
<!--
$("#panes>div").hide().eq(0).show();
var current=$("#tabs>li").eq(0).addClass("active");
$("#tabs>li").each(function(i){
$(this).hover(function(){
$("#panes>div").hide().eq(i).show();
current=$(this);
current.addClass("active");
});
})
-->
</script>
</body>