Hi,
Here is my working page. I attached buttons to
white bishop and you can move around but left images are overlapped by right images. I think the problem is with CSS. The brief structure is here.
<script>
$(document).ready(function(){
$('#top').click(function(){
$('#p81').animate({top: "-=64px"}, 100);
});
</script>
<style>
div.chess_board{
height: 512px;
position: relative;
width: 512px;
}
div.chess_square{
height:64px;
position: absolute;
width:64px;
}
div.chess_square.
white {
background: none repeat scroll 0 0 #ffffff;
}
.
.
.
div.chess_piece{
background-image: url("sprite.png");
height: 64px;
width: 64px;
position: absolute;
}
div.chess_piece.bishot.white{
background-position: -64px 0;
}
</style>
<div class="chess_board">
<div id="b81" class="chess_square
white" style="top: 448px; left: 64px;">
<div class="chess_square_inner"></div>
<div id="p81" class="chess_piece bishot
white"></div>
</div>
</div>
<input type="button" id="top" value="top" />
