Суббота, 11.05.2024, 19:35
Скрипты для Ucoz
Карта сайта
Главная | Увеличенного изображения картинки при наведении мыши. - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
  • Страница 1 из 1
  • 1
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Увеличенного изображения картинки при наведении мыши. (Скрипт 3 шт. Работа с графикой)
Увеличенного изображения картинки при наведении мыши.
bandjukДата: Вторник, 04.10.2011, 14:15 | Сообщение # 1
Генерал-лейтенант
Группа: Администраторы
Пол:
Награды: 22
Репутация: 22
Сообщений: 615
Бог сайта и форума За дизайнерские умения За уважение народа За хорошую посещаемость на форуме за 100 постов
Тут приведены 3 скрипта для увеличения изображения картинки при наведении на неё мишы.
Вставьте этот код на страницу где хотите видеть изображения между <head> и </head>:

Code

<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
     box-shadow: 5px 5px 7px #818181;
     -webkit-box-shadow: 5px 5px 7px #818181;
     -moz-box-shadow: 5px 5px 7px #818181;
     filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
     background: white;
     }

</style>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="featuredimagezoomer.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({
     zoomrange: [3, 10],
     magnifiersize: [300,300],
     magnifierpos: 'right',
     largeimage: 'http:// адрес первого изображения' //<-- No comma after last option!
     })

$('#image2').addimagezoom({
     zoomrange: undefined,
     magnifiersize: [500,300],
     magnifierpos: 'right',
     largeimage: 'http:// адрес второго изображения' //<-- No comma after last option!
     })

$('#image3').addimagezoom()

})

</script>


Код для вставки самих картинок:
Этот код вставляем между <body> и </body>

Картинка №1:

Code

<img id="image1" border="0" src="http:// адрес первого изображения" style="width:300px;height:225px" />


Картинка №2:

Code

<img id="image2" border="0" src="http://адрес второго изображения" align="left"style="width:300px;height:225px" />


Картинка №3:

Code

<img id="image3" border="0" src="http://адрес третьего изображения" style="width:300px;height:225px" />


Если хотите, чтобы изображения обтекались текстом вставте в код изображения перед style= тег align="left" (как в коде изображения №2).



1, 2 ,3 изображения соответственно.

Материалы на эту же тему:

Скрипт "Смена изображения при наведении курсора"
Скрипт "Коды для вставки..." для фотоальбома
Скрипт "Самое классное онлайн радио "
Скрипт кнопка "Спасибо"
Скрипт "Форма входа (RuForm) v 1.0"
Скрипт "Светлый мини профиль"
Скрипт "Cтатистика пользователей"
Скрипт "Иконка rss в адресной строке"
Скрипт "Подписка на новости сайта"
Скрипт "Фон для иконок форума"
Скрипт "Панель добавление в Социальные закладки"
Красивая страница 404
 
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Увеличенного изображения картинки при наведении мыши. (Скрипт 3 шт. Работа с графикой)
  • Страница 1 из 1
  • 1
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2024

Создать бесплатный сайт с uCoz