Увеличение картинки при наведении курсором. - Страница 2 - Форум
Включить музыку | Воскресенье, 11 Дек 2016, 7.06.38| Главная | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 2 из 2«12
Архив - только для чтения
Форум » Корзина » Архив » Скрипты глобальных блоков » Увеличение картинки при наведении курсором. (для блоков на главной странице***)
Увеличение картинки при наведении курсором.
xmusicДата: Понедельник, 29 Дек 2008, 8.40.21 | Сообщение # 1
Майор
Группа: Проверенные
Город: Astana
На форуме с: 09 Дек 2008
Награды: 3
Сообщений: 62
< >
Статус:
~ Мои награды ~
Увеличение картинки при наведении на него мышки.

Пример можно посмотреть здесь:

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

[p.s.]1) Код исправлен *Кэт*[/p.s.]

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>


Сообщение отредактировал Кэт - Воскресенье, 10 Янв 2010, 11.01.06
 
ШиэллаДата: Пятница, 22 Июн 2012, 4.24.23 | Сообщение # 6
Рядовой
Группа: Пользователи
Город: Харьков
На форуме с: 22 Июн 2012
Награды: 0
Сообщений: 3
< >
Статус:
~ Мои награды ~
Добрый день!!
Во-первых, спасибо за скрип - полезная штука.
А во-вторых, появилась проблема. В форумных сообщения все работает на "ура", но появилась необходимость использовать эту радость в "каталоге файлов"...И никак, игнорирует, не видит, просто вставляет текст (((
Если не знатруднит, помогите разобратся! sm23 sm23 sm23
 
veterokuaДата: Суббота, 23 Июн 2012, 2.02.02 | Сообщение # 7
Генерал-полковник
Группа: Администраторы
На форуме с: 11 Окт 2009
Награды: 93
Сообщений: 1647
< >
Статус:
~ Мои награды ~
Шиэлла, а Вам нужен именно такой скрип или может альтернативу предложить специально для Каталога файлов
 
ШиэллаДата: Суббота, 23 Июн 2012, 6.48.41 | Сообщение # 8
Рядовой
Группа: Пользователи
Город: Харьков
На форуме с: 22 Июн 2012
Награды: 0
Сообщений: 3
< >
Статус:
~ Мои награды ~
veterokua, ооо, если принцип работы (всплавающее изображени) будет тот же, я буду безумно счастлива поставить и 10к других скриптов =)
 
ШиэллаДата: Вторник, 31 Июл 2012, 7.43.51 | Сообщение # 9
Рядовой
Группа: Пользователи
Город: Харьков
На форуме с: 22 Июн 2012
Награды: 0
Сообщений: 3
< >
Статус:
~ Мои награды ~
Ап темки Т_Т
 
veterokuaДата: Вторник, 31 Июл 2012, 9.32.47 | Сообщение # 10
Генерал-полковник
Группа: Администраторы
На форуме с: 11 Окт 2009
Награды: 93
Сообщений: 1647
< >
Статус:
~ Мои награды ~
Шиэлла, я помню про тебя, знаю. Но не могу пока подобрать подходящий.
 
Форум » Корзина » Архив » Скрипты глобальных блоков » Увеличение картинки при наведении курсором. (для блоков на главной странице***)
Страница 2 из 2«12
Поиск:
Последние сообщения на форуме
Посетители дня
Посетители:

В гостях у Белчонки © 2016