• Страница 1 из 1
  • 1
Форум » uCoz » Другие скрипты для uCoz » Увеличение картинки при наведении курсора.
Увеличение картинки при наведении курсора.
Дмитрий Дата: Вторник, 03.07.2012, 22:23 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий

Регистрация:03.12.2011
Страна: Российская Федерация
Репутация:  14
Сообщений: 1421
Награды: 4 +
Статус:
Quote
Увеличение картинки при наведении курсора
с использованием CSS (стилей)


Данное решение основано на условии a:hover

Вот код, который надо вставить в стили.

Code
/* =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; }          
/* ----------------- */


Меняя цветовые значения, можно настроить рамку вокруг картинки под свой дизайн.

Code
.hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -95px; z-index: 1; }


- в этой строке настраивается расположение рисунка на странице относительно превью.
Вот код, который вставляется в контент страницы, непосредственно в сообщение.
Можно вставлять прямо в код шаблона.

Code

<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>


Code
<a href="адрес альбома" title="Посмотреть альбом" target="_blank">
- если картинка взята из альбома, то можно сделать ссылку на просмотр его. Если загружена в файловый менеджер, то просто вместо адреса вставляете # - вот так
Code
<a href="#" >


. Можно просто вставить адрес картинки и тогда при нажатии на область, откроется новое окно, с картинкой в полном размере.
width="150" - размер маленькой картинки
width="500" - размер большой картинки
Но это ещё не всё. Для того чтобы работало в IE нужно вставить перед head следующее:

обязательно объявите ДОКТАЙП, стандарт по какому браузер должен читать сайт.

У меня объявлен вот такой:

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU"  "http://www.w3.org/TR/REC-html40/loose.dtd">
From Russia With Love!
Форум » uCoz » Другие скрипты для uCoz » Увеличение картинки при наведении курсора.
  • Страница 1 из 1
  • 1
Поиск: