Ссылочка с активным фоном.

[schnibbl]

Давно тема такая была, но кудато делась, а тема я думаю неплохая и довольно часто встречается.
Постановка задачи: при наведении на ссылку меняется помимо цвета ссылки еще и фон (в наипростейшем случае только цвет фона) + нажимать не обязательно на текст а можно и на фон рядом с сылкой. тоесть - имеем такую дрянь:
  ----------------------------
| +        Ссылочка        +  |
  ----------------------------
и в нашем случаемы хотим чтобы переход по ссылке осуществлялся не только при клике непосредственно на слово Ссылочка но и в места обозначенные на рисунке плюсиками.
Решение задачи: первым делом как вы уже поняли помещаем наши ссылочки в столбцы таблицы.

Код:

<table><tr><td width="350">
<A href="">Ссылочка</a>
</td></tr></table>

далее делаем активным фон по наведению мышкой, для удобства делаем с помощью отдельной таблицы css (у нас же предполагается не 1 такая ссылка, а кучка как подключать таблицу, наверно сами знаете) :

Код:

<table><tr><td width="350" id="linkOver" onMouseOver=id="linkUp" onMouseOut=id="linkOver">
<A href="">Ссылочка</a>
</td></tr></table>

в таблице css записываем такие правила для linkOver и linkUp:

Код:

#linkOver {background-color:#ffcc00}
#linkUp {background-color:#cc9a66}
 

Теперь при наведении на ссылочку будет меняться фон всей ячейки таблицы. но осталась вторая часть задачи - очень часто встречаеш на сайте такую вещ что вроде бы фон подсветился дескать мы выбираем нужный раздел но по клику ничего не происходит до тех пор пока мышью не выделиш именно саму надпись. по моему очень плохо смотриться и лудше делать активным фесь фон за ссылкой вроде бы в меню - так логичнее. Для этого нам нужно обазначить для браузера что ссылкой является не только надпись но и всё пространство замкнутое в теги <td>   </td>. Для этого в Опере достаточно внутри ссылки сделать <div>:

Код:

<table><tr><td width="350" id="linkOver" onMouseOver=id="linkUp" onMouseOut=id="linkOver">
<A href=""><div>Ссылочка</div></a>
</td></tr></table>

но такая конструкция не будет работать в IE. потому добавляем в таблице стилей правило для div таким образом:

Код:

div.link {width:100%}

и сам кусок кода выглядит в конечном случае так:

Код:

<table><tr><td width="350" id="linkOver" onMouseOver=id="linkUp" onMouseOut=id="linkOver">
<A href=""><div class="link">Ссылочка</div></a>
</td></tr></table>

вот в общем то и всё. Если у кого есть замечания, дополнения или правки сообщайте , или может кто предложит вариант покороче ? буду только рад вашим поправкам.