Простой способ добавить красивый ролловер на сайт InstantCMS. Вот образец http://www.cmsinstant.ru/stati/obrazec-rolovera.html
Итак берем картинку шириной 600 на 100 пикселей, затем код
<div id="rollover"> <a href="http://cmsinstant.ru"></a> </div>
Этот код вы можете вставить в модуль или в статью, или в темплате, последний вариант не совсем удобный.
В названии сайта, прописываете свой сайт.
Теперь открываем файл styles.css и вставляем туда в самый конец, стиль этого ролловера.
#rollover a { display: block; width: 200px; /* Ширина блока ролловера, соответствует ширине картинки разделенной на три */ height: 100px; /* Высота блока ролловера, соответствует высоте картинки */ background: url(../images/rollover.png) 0 0 no-repeat; /* Путь до картинки ролловера */ } #rollover a:hover { background-position: -200px 0; /* При наведении курсора на картинку, она смещается на один блок влево, в данном случае на 200 пикселей */ } #rollover a:active { background-position: -400px 0; /* При клике по изображение, она смещается на два блока влево, в данном случае на 400 пикселей */ }
Всё, теперь вы можете подключить первый код закинув его в инклюдес к модулю или к статье. Картинка естественно перерисовывается. Меняя код css вы можете изменять размеры ролловера.
Теперь, если вам нужно вывести два ролловера на сайте, это может быть ссылка на группу вашего сайта в соц сетях и что то еще. Даже можно сделать некоторый вариант меню.
Для вывода 2 ролловеров и более меняем ИД. Получится вот так
Это для стиля
#rollover_one a { display: block; width: 200px; height: 100px; background: #ff0 background: url(../images/rollover.png) 0 0 no-repeat; } #rollover_one a:hover { background-position: -200px 0; background: #ccc; } #rollover_one a:active { background-position: -400px 0; background: #000; } #rollover_two a { display: block; width: 200px; height: 100px; background: #f00 background: url(../images/rollover.png) 0 0 no-repeat; } #rollover_two a:hover { background-position: -200px 0; background: #000; } #rollover_two a:active { background-position: -400px 0; background: #fff; }
То есть мы вводим еще один ролловер с другим ИД, дабы отображались оба.
Теперь текст php который в инклюдес
<div id="rollover_one"> <a href="http://cmsinstant.ru"></a> </div> <div id="rollover_two"> <a href="http://cmsinstant.ru"></a> </div>
Картинка должна быть в папке images вашего шаблона.