Сбой увеличения изображения

[MetisKot]

Всем привет! Прощу о помощи! Проблема такая: создал фигуру которая состоит из маленьких картинок. Нужно чтобы при наведении курсора на маленькую картинку появлялась большая, не сдвигая остальные. Воплотил через css. Маленькая картинка, это ссылка на большую. Но вот в чем дело: наведение курсора не на всей площади маленькой картинки работает ссылкой. Это или левый верхний угол, или правый нижний.
Коды:
CSS:
<style type="text/css">
.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{ display: block;
position: absolute;
top: 39px;
left: 43px;
z-index: auto;
}
.hoverbox li
{ display: inline;
float: center;
margin: 20px;
padding: 20px;
position: absolute;
}
</style>


HTML:
<div style="position: absolute; width: 43px; height: 39px; z-index: auto; left: 431px; top: 82px" id="layer74">
<ul class="hoverbox">
<li>
<a href="#">
<img src="photo\img1.jpg" border="0" />
<img class="preview" src="photo\img2.jpg" border="0" />
</a>
</li>
</ul>
</div>

<div style="position: absolute; width: 43px; height: 39px; z-index: auto; left: 375px; top: 31px" id="layer76">
<ul class="hoverbox">
<li>
<a href="#">
<img src="photo\img1.jpg" border="0" />
<img class="preview" src="photo\img2.jpg" border="0" />
</a>
</li>
</ul>
</div>

ПОМОГИТЕ!!! ПЛИЗ!

[Виталий Желтяков]

Используйте z-index.