Описание: Данный скрипт хорошо подходит для выделения категорий в виде графического оформления на веб-сайте. При наведении курсором на раздел с категорией она выделяется более насыщенном цветом, категории легко изменить на свой а так же заменить изображения, легок в установке. Установка: Вставляем код где будет размещаться таблица с категориями:
Код <table id="categories"> <tr> <td width="25%"> <a href="/categories/1" class="cat-link link-blogs">Блоги</a><br/> <a href="/categories/2" class="cat-link link-sport">Спорт</a><br/> <a href="/categories/3" class="cat-link link-personal">Персональные</a> </td> <td width="25%"> <a href="/categories/4" class="cat-link link-portals">Порталы</a><br/> <a href="/categories/5" class="cat-link link-games">Игровые</a><br/> <a href="/categories/6" class="cat-link link-movies">Кино</a> </td> </td> <td width="25%"> <a href="/categories/7" class="cat-link link-hobby">Хобби</a><br/> <a href="/categories/8" class="cat-link link-funsites">Фан-сайты</a><br/> <a href="/categories/9" class="cat-link link-business">Бизнес-сайты</a> </td> <td width="25%"> <a href="/categories/10" class="cat-link link-ecommerce">Коммерческие</a><br/> <a href="/categories/11" class="cat-link link-school">Образовательные</a><br/> <a href="/categories/12" class="cat-link link-other">Другие</a> </td> </tr> </table>
В CSS стиль вставляем: Код /*Table-categories*/ table#categories {border-spacing: 0;width: 100%;margin-bottom: 10px;} table#categories td {padding: 0 0 0 20px;vertical-align: top;border: 0;} a.cat-link {padding: 1px 0 1px 35px;line-height:26px;background-repeat: no-repeat;background-position: 0 0;font-size: 15px;color: #757575;} a.cat-link:hover, .hov {color: #585858 !important;background-position: 0 -23px !important;text-decoration: none;} .link-home {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-home.png);} .link-sugg {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-suggest.png);} .link-blogs {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-blogs.png);} .link-hobby {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-hobby.png);} .link-personal {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-personal.png);} .link-portals {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-portals.png);} .link-games {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-games.png);} .link-movies {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-movies.png);} .link-sport {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-sport.png);} .link-funsites {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-funsites.png);} .link-business {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-business.png);} .link-ecommerce {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-ecommerce.png);} .link-other {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-other.png);} .link-school {background-image: url(http://csomsk.ru/csomsk/ic-categories/gradhat.png);} .link-government {background-image: url(http://csomsk.ru/csomsk/ic-categories/ico-scales.png);} /*-------*/
|