Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2011-12-08

Увеличение изображения с помощью JavaScript

В этом уроке мы научимся реализовывать достаточно полезную и часто используемую функцию: плавное увеличение картинки (графического файла) при наведении на него курсора мыши. Ни один современный сайт не обходится без графики, следовательно эту функцию можно использовать везде - где есть картинки. Чтобы посмотреть увеличенное изображение его не нужно открывать в новом окне, а достаточно просто навести на него курсор.

Сделать на сайте подобную функцию очень просто, достаточно использовать специальный скрипт. Живой пример работы скрипта Вы видите ниже:

Смоленск. Успенский собор Смоленск. Памятник А. Твардовскому и В. Теркину Смоленск. Кафе Русский Дворик

Изображения на web-странице можно распологать как горизонтально (пример выше), так и вертикально (друг под другом) пример ниже:

Смоленск. Успенский собор
Смоленск. Памятник А. Твардовскому и В. Теркину
Смоленск. Кафе Русский Дворик

Как реализовать такой эффект на своем сайте? Очень просто. Для начала скачайте архив с исходниками. Распакуйте архив. Файл imagesize.js положите в корневую папку, или любую другую, но тогда обязательно пропишите реальный путь до этого файла. Теперь подключаем этот скрипт к свое web-странице, для этого как обычно между тегами <head> и </head> прописываем код Листинга 1:

Листинг 1.

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

Это стандартное подключение скриптов.

В том месте web-страницы, где будет выводится изображение прописываем код Листинга 2.

Листинг 2.

<div>
<img border="0" src="sobor.jpg" width="150" height="110">
<img border="0" src="terkin.jpg" width="150" height="110">
<img border="0" src="kafe.jpg" width="150" height="110">
</div>

В данном случае у меня здесь прописано три разных изображения. У Вас конечно же может быть любое количество картинок.

Обратите внимание, что в коде мы прописываем размер миниатюры, т.е. какого размера Вы хотите видеть уменьшенные изображения. Я указал для всех 3-х картинок одинаковый размер: width="150" height="110". Реальные же размеры у всех картинок разные. Например графический файл sobor.jpg имеет размеры 500х333 пикселей. Скрипт сам увеличивает картинку до реального размера.

Скрипт работает без проблем во всех браузерах. Но как Вы наверное уже заметили есть один не очень приятный эффект. Картинка получается как бы плавающим элементом и при увеличении в размерах, вытесняет расположенный рядом контент. При вертикальном расположении это не так критично, а вот при горизонтальном расположении иногда такой эффект выглядит не очень приятно. Я умышленно расположил несколько картинок, чтобы Вы смогли это уместь при компоновке своих web-страницы.

Вот собственно говоря и все... В архиве находится действующий пример работы скрипта если что-то не понятно можете посмотреть исходный код. Скачать архив.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Введены новые правила регистрации Доменных Имен в зонах RU и РФ.

Локальный Сервер (Денвер) у Вас дома.

Как сделать на сайте бегущий текстовый блок?

Как создать реально работающую модель бизнеса? Бестселлер в электронном виде.

Пошаговый обучающий Видео Курс по созданию сайтов.

 

Просмотров: 21879


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): АндрейК
Дата: 2011-12-09

Александр. Конечно же сделать можно все, но для внедрения подобного эффекта (описанного в этом уроке) в различные CMS (в том числе и в WP) проще воспользоваться готовым плагином.

Комментарии добавил(а): Лариса
Дата: 2011-12-09

Спасибо. Всё получилось. Расскажите, пожалуйста, как сделать лентц новостей, как у Вас на сайте. Заранее спасибо.

Комментарии добавил(а): АндрейК
Дата: 2011-12-09

Лариса. Если Вы спрашиваете о: Бегущем текстовом новостном блоке, то о нем я уже рассказывал ранее. Посмотрите здесь: http://www.luksweb.ru/view_post.php?id=245

Комментарии добавил(а): Виктор
Дата: 2011-12-09

Сделал на сайте бегущую строку из фотографий, при наведении курсора на фотографию она увеличивается. Но проблема в том, что в разных браузерах(кроме IE)увеличение происходит некорректно.Фото увеличивается как бы на заднем плане за текстом и глобальными блоками. Сайт создан на платформе ukoz.

Комментарии добавил(а): АндрейК
Дата: 2011-12-09

Бесплатные хостинги и сервисы, различные конструкторы для создания сайтов и т.д. (в том числе и ukoz) очень сильно ограничивают в технических возможностях сайтостроителей. В большинстве случаев скрипты на таких сервисах работают не корректно.

Комментарии добавил(а): Александр
Дата: 2011-12-09

Андрей, заинтересовало. А как насчет WordPress? Или такой же плагин?

Комментарии добавил(а): Nina
Дата: 2011-12-10

Если бы Вы дл аких чайников, как я еще дали урок как эти архивы ложить в корневу папку. Пошагово. А то описываете для тех, кто все понимает.

Комментарии добавил(а): АндрейК
Дата: 2011-12-10

Nina. Подобные уроки уже были, посмотрите здесь: http://www.luksweb.ru/view_post.php?id=57

Комментарии добавил(а): Наталия
Дата: 2011-12-11

Спасибо. Очень полезная информация. Обязательно применю. С размером картинок - познавательно.

Комментарии добавил(а): Николай
Дата: 2011-12-14

У меня в image.src находится строка base64 и в Вашем скрипте в строке e.ims[i].im.src = im.src; в IE происходит ошибка. (В хроме всё нормально). Можно ли это побороть? И ещё - никак не допру, как задать максимальный размер раскрытия картинки?

Комментарии добавил(а): АндрейК
Дата: 2011-12-14

Николай в IE (по крайней мере в 6, 7 и 8 версиях) все рабоает без проблем, и в остальных браузерах тоже. Скорее всего Вы гдето допускаете ошибку. Максимальный размер раскрытия картинки определяется её геометрическим размером, в скрипте задается размер миниатюры, об этом написано в уроке будьте внимательны.

Комментарии добавил(а): Николай
Дата: 2011-12-14

Андрей, спасибо за ответ, но: если в img.src находится url картинки, то действительно всё нормально. Но в img.src можно присвоить строку, в которой картинка сконвертирована в base64 - это длинная строка текста. Тогда операция получения значения св-ва src в IE приводит к ошибке "неверный указатель". Пока я не понял, как это обойти. И про раз-мер - я, конечно понял, что картинка раскрывается до своих родных размеров, но мне надо ограничить это раскрытие. Вот куда в скрипте и что надо написать, чтобы цикл раскрытия прекратился? Спасибо.

Комментарии добавил(а): Алексей
Дата: 2011-12-15

Не могу понять как сделать, что б четыре изображения увеличивались по таким параметрам. Центром я обозначил точку между четырьмя изображений расположенных квадратом. Нижняя левая- увеличивалось от центра вниз и влево. Нижняя правая- увеличивалось от центра вниз и вправо. Верхняя левая- увеличивалось от центра вверх и влево. Верхняя правая- увеличивалось от центра вверх и вправо?

Комментарии добавил(а): Марина
Дата: 2011-12-22

Вот беда, как только начинаю работать со своими картинками, так изображение перестает увеличиваться. Причем я даже в ваш пример просто вставила сои фото - эфект тотже :(

Комментарии добавил(а): Константин
Дата: 2012-05-28

Смоленск!!!)))

Комментарии добавил(а): Дмитрий
Дата: 2012-07-19

Андрей, спасибо за информацию, но что нужно изменить в коде скрипта для того, чтобы при увеличении изображения соседний контент не вытеснялся, то есть картинка увеличивалась поверх всего остального?

Комментарии добавил(а): Сергей
Дата: 2013-02-10

В Листинге2 автор забыл прописать class="expando" для всех трёх фото. Без этого класса скрипт просто отказывается функционировать, а совсем несведущих в этом деле и вовсе заводит в тупик.

Комментарии добавил(а): АндрейК
Дата: 2013-02-10

Сергей если Вы вдруг не заметили, то уточняю: в Листинге 2 в данном случае вообще не прописано никаких классов. Одновременно напоминаю, что какой либо класс задает только внешнее оформление и никак не вляет на работу скрипта.

Комментарии добавил(а): Сергей
Дата: 2013-02-10

АндрейК, я к чему написал сообщение, что сам не являюсь сильным знатоком в скриптах. Просто в том виде, в каком он выставлен на данный момент я вставлял и удалял, и тыкался, и мыкался, и ничего кроме статичных уменьшенных изображений на странице сайта не выводилось. Т.е. все три картинки появились, но при наведении на них мыши никакого плавного увеличения не происходило. И я всё врем я возвращался и возвращался к этому коду - ничего не получалось от раза к разу. Уже просто хотел оставить данное занятие, да только какое-то чувство неудовлетворённости не давало этого сделать. И только когда вставил в код class="expando" всё заработало. Сравните, от чего заработало: <div> <img class="expando" border="0" src="sobor.jpg" width="150" height="110"> <img class="expando" border="0" src="terkin.jpg" width="150" height="110"> <img class="expando" border="0" src="kafe.jpg" width="150" height="110"> </div>, с тем, что выложено в Вашем пояснении. Для Вас может это незначительные нюансы и мелочи, но для полных непрограммеров (к примеру, таких как я) - это является очень значительным моментом. А всего лучше бы было, если б Вы намекнули хоть где-нибудь, что надо открыть файл index.html не в браузере, а в том же Adobe Dreamweaver, и вытянуть оттуда код, да ещё и файл с CSS подключить. А в руководстве по установке я всего этого не нашёл, вот и мытарился. Вот о чём я и хотел сказать. А в остальном большой респект и уважение - уже всё работает!

Комментарии добавил(а): sinicum
Дата: 2013-02-19

Но здесь картинки очень неприятно толкают друг-друга. Вот бы кто подсказал, как увеличить поверх.

Комментарии добавил(а): Евгений
Дата: 2013-08-08

отличный блог, все доходчиво, а главное работает!! Но сейчас у меня стоит немного другой скрипт.

Комментарии добавил(а): Александр
Дата: 2013-12-12

Подскажите, где взять разбор кода скрипта (подробный, чтобы знать, какая строка что означает) ??

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT