Помогите с активными областями вокруг изображения...

Для примера есть сайт... http://www.strogaem.ru/
там на главной странице представлен каталог продукции. При наведении курсора на область вокруг изображения меняется цвет фона, и все это работает как ссылка вместе с изображением.
Как это реализовать?

 

Если смотреть исходный код данной страницы...
<td><a
href="http://www.strogaem.ru/213.html"
target="_blank"
title="Дачные туалеты"
class="hit"
style="background-image: url(/images/submenu/tualet.jpg)">
Дачные туалеты
</a>
</td>
то за все это отвечает class="hit". но вот что в нем нужно прописать понять никак не могу(((((

 

Нашел....

 

может кому еще пригодится:

Код (html):

1. <div class="1">
2.    <div>
3.      <a href="link">
4.         <img>
5.           <br />
6.          <span>text</span>
7.        </a>
8.    </div>
9. <div>

CSS:

Код (CODE):

1. .1 div {
2.    float:left;
3.    margin:5px;
4.    width:100px;
5.    heght:100px;
6. }
7.  
8. .1 div a {
9.    display:block;
10.    width:100px !important;
11.    heght:100px !important;
12.    text-decoration:none;
13.     padding:10px;
14.    background-color:#CCC;
15.    border: solid #333 1px;
16. }
17.  
18. .1 div a:hover{
19.    background-color:#FFC;
20.    border:solid #999 1px;
21. }