Главная » 2010 » Январь » 24 » При наведении курсора картинка увеличивается! (Скрипты для ucoz)
24.01.2010, 11:34

При наведении курсора картинка увеличивается!



Для того чтоб картинка увеличивалась при наведении на неё мыши надо ;
1. В CSS шаблона вствить следующее
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: -45px;  
  z-index: 1;  
}  

.hoverbox img  
{  
  background: #fff;  
  border-color: #a6dcf5;  
  border-style: solid;  
  border-width: 1px;  
  color: inherit;  
  padding: 2px;  
  vertical-align: top;  
}  

.hoverbox li  
{  
  background: #eaf8fe;  
  color: inherit;  
  display: inline;  
  float: left;  
  margin: 3px;  
  padding: 5px;  
  position: relative;  
}  

.hoverbox .preview  
{  
  border-color: #a6dcf5;  
}

2. Сам код картинки должен выглядеть так
Code
<ul class="hoverbox">  
  <li>  
  <a href="#">  
  <img src="АДРЕСС КАРТИНКИ ПРЕВЬЮ" border="0" alt="ОПИСАНИЕ" />  
  <img class="preview" src="АДРЕСС ПОЛНОГО ИЗОБРАЖЕНИЯ" border="0" alt="ОПИСАНИЕ" />  
  </a>  
  </li>  
</ul>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: Скрипты uCoz | Просмотров: 6923 | Добавил: RaDo^^ | Рейтинг: 3.3/3 |
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]