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

Опубликовано:
Редактировалось: 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

Голосуем

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