Код (ролловер) для сдвоенной кнопки с 4 изображениями в одном файле : Коды CSS и HTML : Вебмастеру : Территория Веб графики и фонов

Главная Аккаунт Файлы Ссылки Форум Графика

Разделы

Фоны для сайта
Рамки для сайта
Кнопки для меню
Кнопки
3d кнопки
CSS и HTML
Шаблоны
Примеры кнопок
Flash

Главное меню

Домой

Фоны текстуры

Новости

Фоны 2

Веб графика

Вебмастеру

Добавить статью

Архив статей

Статистика

Архив файлов

Полезные ссылки

Форум

Галерея

Сайты партнеров

Опросы

Карта сайта

13.3.08 17:53 | Код (ролловер) для сдвоенной кнопки с 4 изображениями в одном файле

Раздел: Коды CSS и HTML | Автор: upet | Рейтинг: 0.00 (0) Оценить | Хитов 3199

У CSS есть хорошее свойство, это то, что можно изображения для ролловера разместить в одном файле.
В данном случае я сделал 4 вида кнопки в одном файле.

Смысл такой. Если для ролловера используется 2 или больше вариантов кнопок, то их можно разместить в одном файле, только в коде сделать смещение в любую сторону. Код получается несколько больше, но если он находится в отдельном файле, то на вес страницы никак не влияет.
Кнопки находятся здесь

/*Код CSS*/
.knopka_3{
display: block;
background-image: url(images/knop_file_6.png);      /*путь к файлу*/
width: 96px;
height: 27px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: white;
font-weight: bold;
font-size:12px;
text-decoration: none;
line-height: 22px;
background-repeat: no-repeat
}
a.knopka_3:hover{
display: block;
background-image: url(images/knop_file_6.png);     /*путь к файлу*/
width: 96px;
height: 27px;
background-position: 0px -27px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: white;
font-weight: bold;
font-size: 12px;
text-decoration: none;
padding-top: 1px;
line-height: 22px;
background-repeat: no-repeat;
}
.knopka_4{
display: block;
background-image: url(images/knop_file_6.png);      /*путь к файлу*/
width: 96px;
height: 27px;
background-position: -96px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: white;
font-weight: bold;
font-size:12px;
text-decoration: none;
line-height: 22px;
background-repeat: no-repeat;
}
a.knopka_4:hover{
display: block;
background-image: url(images/knop_file_6.png);     /*путь к файлу*/
width: 96px;
height: 27px;
background-position: -96px -27px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: white;
font-weight: bold;
font-size: 12px;
text-decoration: none;
padding-top: 1px;
line-height: 22px;
background-repeat: no-repeat;
}

Ниже таблица для этой кнопки, вам нужно только вставить свой УРЛ и заменить слово скачать на своё.
Вставляется в код HTML

<table width="192" border="0" cellspacing="0" cellpadding="0" height="25">
<tr>
<th>
<a href="" class="knopka_3">  Скачать</a></th><th><a href="" class="knopka_4">  Скачать</a>
</th>
</tr>
</table>

Родственные ссылки

» Другие статьи раздела Коды CSS и HTML
» Эта статья от пользователя upet

5 cамых читаемых статей из раздела Коды CSS и HTML:
» Ролловер (перекат) или смена картинки при наведении курсора
» Код для кнопки (ролловер с одним изображением) с примерами
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Простейший шаблон HTML
» Код для топ-меню

5 последних статей раздела Коды CSS и HTML:
» Меню вертикальное (код)
» Код для топ-меню
» Код (ролловер) для сдвоенной кнопки с 4 изображениями в одном файле
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Код для кнопки (ролловер с одним изображением) с примерами

¤ Перевести статью в страницу для печати
¤ Послать эту cтатью другу

MyArticles 0.6 beta for RUNCMS: by RunCms.ru

Можно и сюда

Марий эл официальный сайт. | лодочные моторы

Файлообменник meg.ifolder.ru

Здесь вы можете загрузить или скачать свои файлы.
До 500mb бесплатно

Проверьте себя

Загрузка...

Cчётчики