Полноразмерное изображение при наведении на картинкуДля создания полноразмерного изображения при наведении на картинку нам понадобится JQuery.

Итак идем на сайт Jqeury качаем библиотеку и подключаем к сайту или страничке.

Далее пишем функцию по которая бы обрабатывала событие при наведении на картинку

Тут вроде бы все понятно, при наведении на элемент img вызывается функция. Так же если вам не надо чтобы выводилось на каждую картинку, а только на определенную можно использовать класс.

Следующее что мы должны сделать это создать новый элемент img. Добавляем этот элемент в самый конец тела сайта, дабы ничего не разъехалось

this.src в этом коде значит что мы берем атрибут адрес картинки у текущего элемента.

После того как мы добавили картинку она же появится внизу тела. Но зачем нам это, наша картинка наверху, а полноразмерное изображение где то там. добавим немного css.

Здесь мы добавили абсолютное позиционирование расположение на экране мы добавим чуть позже с помощью Jquery. Ограничил размер картинки 200px, и дабы выделить как то картинку добавил тень.

Осталось совсем чуть чуть, отобразить картинку рядышком с текущей картинкой и при движении мышки по картинки двигалось и само изображение. Так сделаем же.

При движении мыши по картинке передаем параметры event`а (e), b добавляем к картинке с классом css left и top с текущим положением мыши +-20px. И наконец последний штрих при окончании наведения на мыши надо убрать картинку. Решается это вот этой строчкой

Забыл сказать что у event hover можно сделать функции. Первая функция будет выполняется при начале event, а вторая при окончании. Поэтому удалении картинки выполняется во второй функции. В результате у нас получился следующий код:

 

А результат выполнения вы можете посмотреть здесь