<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<body>
<div style="border: 1px solid gray; position: absolute; left: 0; top: 0; width: 402; height: 402;">
<script>
$(function () {
$('#div1').hover(function () {
$(this).stop().animate({
'width': '180px',
'height': '180px',
'top': '20px'
}, 300)
}, function () {
$(this).stop().animate({
'width': '200px',
'height': '200px',
'top': '0px'
}, 300)
});
$('#div2').hover(function () {
$(this).stop().animate({
'width': '180px',
'height': '180px',
'left': '20px',
'top': '20px'
}, 300)
}, function () {
$(this).stop().animate({
'width': '200px',
'height': '200px',
'left': '0px',
'top': '0px'
}, 300)
});
$('#div3, #div4').hover(function () {
$(this).stop().animate({
'width': '180px',
'height': '180px'
}, 300)
}, function () {
$(this).stop().animate({
'width': '200px',
'height': '200px'
}, 300)
});
});
</script>
<img id="div1" style="border: 0px; position: absolute; left: 199px; top: 0px; width: 200px; height: 200px;"
src="http://tsigelization.narod.ru/temp/1_5.png">
<img id="div2" style="border: 0px; position: absolute; left: 1px; top: 0px; width: 200px; height: 200px;"
src="http://tsigelization.narod.ru/temp/2_5.png">
<img id="div3" style="border: 0px; position: absolute; left: 197px; top: 199px; width: 200px; height: 200px;"
src="http://tsigelization.narod.ru/temp/3_5.png">
<img id="div4" style="border: 0px; position: absolute; left: -1px; top: 200px; width: 200px; height: 200px;"
src="http://tsigelization.narod.ru/temp/4_5.png">
</div>
<input type="button" onclick="reset()" value="Reset" style="position: absolute; left: 10; top: 410">
</body>
C нижними сами доделаете.