[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Информация для Web-мастера » Скрипты для uCoz » Увеличение картинки при наведениии на неё мышки
Увеличение картинки при наведениии на неё мышки
grafДата: Среда, 11.03.2009, 02:43 | Сообщение # 1
Admin
Группа: Пользователи
Сообщений: 148
« 3 »

Для того чтоб картинка увеличивалась при наведении на неё мыши надо ;
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>  




Форум » Информация для Web-мастера » Скрипты для uCoz » Увеличение картинки при наведениии на неё мышки
  • Страница 1 из 1
  • 1
Поиск: