Как сделать так чтобы при наведении на картинку она увеличивалась html

Как сделать так чтобы при наведении на картинку она увеличивалась html

Как сделать так чтобы при наведении на картинку она увеличивалась html


Как сделать так чтобы при наведении на картинку она увеличивалась html
Как сделать так чтобы при наведении на картинку она увеличивалась html

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

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

Дата: 2011-12-08

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

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

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

Изображения на 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 и РФ.

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

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

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

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

 

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

АндрейК, я к чему написал сообщение, что сам не являюсь сильным знатоком в скриптах. Просто в том виде, в каком он выставлен на данный момент я вставлял и удалял, и тыкался, и мыкался, и ничего кроме статичных уменьшенных изображений на странице сайта не выводилось. Т.е. все три картинки появились, но при наведении на них мыши никакого плавного увеличения не происходило. И я всё врем я возвращался и возвращался к этому коду - ничего не получалось от раза к разу. Уже просто хотел оставить данное занятие, да только какое-то чувство неудовлетворённости не давало этого сделать. И только когда вставил в код 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 подключить. А в руководстве по установке я всего этого не нашёл, вот и мытарился. Вот о чём я и хотел сказать. А в остальном большой респект и уважение - уже всё работает!

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

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

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

Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html Как сделать так чтобы при наведении на картинку она увеличивалась html

Похожие новости:

Торт из сладостей и сока своими руками пошаговое фото для начинающих



Схема установки сигнализации на автомобиль своими руками



Открытки поздравление с днем рождения подруге в прозе



Ремонт стеклоподъемника фольксваген шаран своими руками



Как самой сделать новогодние гирлянды своими руками