Главная Клубы Работа с CSS InstantCMS Блог клуба Работа с CSS InstantCMS

Добавим ролловер на сайт

Опубликовано:
Редактировалось: 1 раз — 3 июля 2015
Просмотров: 1813
+6↑
Голосов: 6

Простой способ добавить красивый ролловер на сайт InstantCMS. Вот образец http://www.cmsinstant.ru/stati/obrazec-rolovera.html

Итак берем картинку шириной 600 на 100 пикселей, затем код

Код PHP:
  1. <div id="rollover">
  2. <a href="http://cmsinstant.ru"></a>
  3. </div>

Этот код вы можете вставить в модуль или в статью, или в темплате, последний вариант не совсем удобный.

В названии сайта, прописываете свой сайт.

Теперь открываем файл styles.css и вставляем туда в самый конец, стиль этого ролловера.

Код PHP:
  1. #rollover a {
  2.     display: block;
  3.     width: 200px; /* Ширина блока ролловера, соответствует ширине картинки разделенной на три */
  4.     height: 100px;  /* Высота блока ролловера, соответствует высоте картинки */
  5.     background: url(../images/rollover.png) 0 0 no-repeat; /* Путь до картинки ролловера */
  6. }
  7. #rollover a:hover {
  8.     background-position: -200px 0; /* При наведении курсора на картинку, она смещается на один блок влево, в данном случае на 200 пикселей */
  9. }
  10. #rollover a:active {
  11.     background-position: -400px 0;  /* При клике по изображение, она смещается на два блока влево, в данном случае на 400 пикселей */
  12. }

Всё, теперь вы можете подключить первый код закинув его в инклюдес к модулю или к статье. Картинка естественно перерисовывается. Меняя код css вы можете изменять размеры ролловера.

Теперь, если вам нужно вывести два ролловера на сайте, это может быть ссылка на группу вашего сайта в соц сетях и что то еще. Даже можно сделать некоторый вариант меню.

Для вывода 2 ролловеров и более меняем ИД. Получится вот так

Это для стиля

Код PHP:
  1. #rollover_one a {
  2.     display: block;
  3.     width: 200px;
  4.     height: 100px;
  5.     background: #ff0 background: url(../images/rollover.png) 0 0 no-repeat;
  6. }
  7. #rollover_one a:hover {
  8.     background-position: -200px 0;
  9.     background: #ccc;
  10. }
  11. #rollover_one a:active {
  12.     background-position: -400px 0;
  13.     background: #000;
  14. }
  15. #rollover_two a {
  16.     display: block;
  17.     width: 200px;
  18.     height: 100px;
  19.     background: #f00 background: url(../images/rollover.png) 0 0 no-repeat;
  20. }
  21. #rollover_two a:hover {
  22.     background-position: -200px 0;
  23.     background: #000;
  24. }
  25. #rollover_two a:active {
  26.     background-position: -400px 0;
  27.     background: #fff;
  28. }

То есть мы вводим еще один ролловер с другим ИД, дабы отображались оба.

Теперь текст php который в инклюдес

Код PHP:
  1. <div id="rollover_one">
  2. 	<a href="http://cmsinstant.ru"></a>
  3. </div>
  4. <div id="rollover_two">
  5. 	<a href="http://cmsinstant.ru"></a>
  6. </div>

Картинка должна быть в папке images вашего шаблона.
Комментарии (3)
Letsgo #
Рейтинг: +1
ну как впечатления?
Ответить
Defrost #
Рейтинг: 0
Гыгы оригинально и одной картинкой, я обычно три пользую
Ответить
Марк #
Рейтинг: 0
Все красиво, но наф оно надо? n
Ответить
Добавить комментарий RSS-лента комментариев

Голосуем

Самый нужный компонент