Просматривая БЛОГ uCoz, понравилось интересное решение, по просмотру картинок при наведении курсора на них. Написал в блоге, попросил администрацию поделиться премудростями, но ответа не получил. Пришлось самому вникать во всё.
Я человек не жадный, вот решил поделиться своими знаниями, как это можно применить на своих сайтах. Пример использования можно просмотреть на школьном сайте в новостях.
Увеличение картинки при наведении курсора
с использованием CSS (стилей)
Данное решение основано на условии a:hover
Вот код, который надо вставить в стили.
Код /* =Hoverbox Code= */
.hoverbox { cursor: default; list-style: none; }
.hoverbox a { cursor: default; }
.hoverbox a .preview { display: none; }
.hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -95px; z-index: 1; }
.hoverbox img { background: #F8F1DC; border-color: #FFCC66; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; }
.hoverbox li { background: #F8F1DC; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative; }
.hoverbox .preview { border-color: #FFCC99; }
/* ----------------- */
Меняя цветовые значения, можно настроить рамку вокруг картинки под свой дизайн.
Код .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -95px; z-index: 1; }
Вот код, который вставляется в контент страницы, непосредственно в сообщение.
Можно вставлять прямо в код шаблона.
Код <ul class="hoverbox"> <li> <a href="адрес альбома" title="Посмотреть альбом" target="_blank"> <img src="адрес картинки" alt="описание" border="0" width="150"> <img class="preview" src="адрес картинки" alt="описание " border="0" width="500"> </a> </li> </ul>
Код <a href="адрес альбома" title="Посмотреть альбом" target="_blank">
width="150" - размер маленькой картинки
width="500" - размер большой картинки
Но это ещё не всё. Для того чтобы работало в IE нужно вставить перед head следующее:
обязательно объявите ДОКТАЙП, стандарт по какому браузер должен читать сайт.
У меня объявлен вот такой:
Код <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU" "http://www.w3.org/TR/REC-html40/loose.dtd"> | 
| 
|
