Увеличение картинки при наведении курсором. - Форум
Включить музыку | Суббота, 03 Дек 2016, 12.34.33| Главная | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 212»
Архив - только для чтения
Форум » Корзина » Архив » Скрипты глобальных блоков » Увеличение картинки при наведении курсором. (для блоков на главной странице***)
Увеличение картинки при наведении курсором.
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
 
162nordДата: Суббота, 10 Янв 2009, 3.37.45 | Сообщение # 2
Сержант
Группа: Проверенные
На форуме с: 11 Дек 2008
Награды: 2
Сообщений: 31
< >
Статус:
~ Мои награды ~
xmusic, спасибо!!!! Интересная ВЕЩЬ!!!! НО не корректно работает в IE.
В Мозиле и Опере нормально!!!

Ко всему вначале сказанному xmusic,

следует добавить вот ЭТО:
Вставляем в
после

Code
<!--[if IE 6]><link rel="stylesheet" href="http://blog.ucoz.ru/css/style-for-ie6.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://blog.ucoz.ru/css/style-for-ie7.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->

========================================================
добавил vveterokua

код ссылки http://blog.ucoz.ru/css/style-for-ie6.css CSS

Code

div#login-block {background: url('http://blog.ucoz.ru/img/login-bg-ie.gif') no-repeat !important; width: 246px; height: 167px; position: relative; left: -50px;}
.login-form {position: relative; left: -20px;}
div#enter-button {margin-left: -60px;}
div#content  
.simple {width: 603px;}

/* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
  position: relative;
}

.hoverbox a:hover
{
  display: block;
  font-size: 100%;
  z-index: 1;
}

.hoverbox a:hover .preview
{
  top: -38px;
  left: -50px;
}

.hoverbox li
{
  position: static;
}

код ссылки http://blog.ucoz.ru/css/style-for-ie7.css CSS

Code

div#login-block {position: relative; left: -50px;}
.login-form {position: relative; left: -20px;}
div#enter-button {margin-left: -60px;}
.simple {width: 603px;}

/* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
  position: relative;
}

.hoverbox a:hover
{
  display: block;
  font-size: 100%;
  z-index: 1;
}

.hoverbox a:hover .preview
{
  top: -38px;
  left: -50px;
}

.hoverbox li
{
  position: static;
}




Сообщение отредактировал Кэт - Воскресенье, 10 Янв 2010, 8.33.51
 
frizbi-rusДата: Суббота, 11 Сен 2010, 11.02.27 | Сообщение # 3
Рядовой
Группа: Пользователи
Город: Ростов-на-Дону
На форуме с: 11 Сен 2010
Награды: 0
Сообщений: 2
< >
Статус:
~ Мои награды ~
кто нибудь может объяснить как установить этот скрипт!пожалуйста
 
frizbi-rusДата: Суббота, 11 Сен 2010, 11.04.08 | Сообщение # 4
Рядовой
Группа: Пользователи
Город: Ростов-на-Дону
На форуме с: 11 Сен 2010
Награды: 0
Сообщений: 2
< >
Статус:
~ Мои награды ~
сам код картинки куда вставлять? sm18
 
veterokuaДата: Суббота, 11 Сен 2010, 2.20.26 | Сообщение # 5
Генерал-полковник
Группа: Администраторы
На форуме с: 11 Окт 2009
Награды: 93
Сообщений: 1647
< >
Статус:
~ Мои награды ~
Quote (frizbi-rus)
сам код картинки куда вставлять?

Код картинки туда вставлять,где она будет расположена на странице или в блоке или еще где

Quote (frizbi-rus)
кто нибудь может объяснить как установить этот скрипт!пожалуйста

Что конкретно непонятно тебе.Вроде написано понятнее некуда.прочитай внимательнее

 
Форум » Корзина » Архив » Скрипты глобальных блоков » Увеличение картинки при наведении курсором. (для блоков на главной странице***)
Страница 1 из 212»
Поиск:
Последние сообщения на форуме
Посетители дня
Посетители:

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