Урок. Увеличение картинки при
наведении
на неё мышью.
Серия дополнительных уроков.
Доброго времени суток!
Данный урок поможет сделать необычный эффект увеличения картинки при наведении на неё мышью, либо увеличенное открытие картинки на этой или новой странице по выбору.
Вот пример того, что мы будем делать:Вариант #1.
Увеличение изображения при наведении мышью и возврат в исходный вид при отведении мыши в сторону. (Наведи на мышью на изображение)
Код для вставки на сайт:
<img src="ссылка_на картинку1" border="0"onmouseover="this.src='ссылка_на картинку2';" onMouseOut="this.src='ссылка_на картинку1';" /> Пояснения:
ссылка_на картинку1 - маленькое изображение, здесь вы прописываете относительный путь к вашему изображению на сайте.
ссылка_на картинку2 - большое изображение, здесь вы прописываете относительный путь к вашему изображению на сайте.
Если не понятно, что такое абсолютная и относительная ссылка, то смотрим здесь
Вариант #2.
Открытие увеличенного изображения картинки в новом окне, на новой странице.
(Нажми на изображение)
Код для вставки на сайт:
<a href="ссылка_на картинку1" alt="Здесь описание картинки " target="_blank"><img src="ссылка_на картинку2" border="0" alt="Здесь описание картинки "></a>
Пояснения кода смотрите вариант #1.
Вариант #3.
Открытие увеличенного изображения картинки на этой же странице.
(Нажми на изображение)
Код для вставки на сайт:
<a href="ссылка_на картинку1" alt="Здесь описание картинки "><img src="ссылка_на картинку2" border="0" alt="Здесь описание картинки "></a> Пояснения кода смотрите вариант #1.
Выбор за вами, что вы будете предлагать и показывать у себя на сайте.
Вот для примера решил сделать небольшую галерею.
Картинки увеличиваются при наведении и уменьшаются при отводе мыши в сторону.
(вставил код в таблицу 2 строки 3 столбца)
Изображения вставляйте разные, в примере я вставил одинаковое.
|
|
|
|
|
|
Второй пример вставки изображений с открытием изображения
при
нажатии в новой странице.
(вставил код в таблицу 1 строка 3 столбца)
|
|
|
Внимание!
Если вы испытываете трудности в создании картинок разного размера, то специально для вас я записал маленький видеоурок по работе в программе фотошоп.
Просмотреть данный урок можно здесь
Просмотреть как правильно создать таблицу можно перейдя ниже по ссылке.
Полезный сайтик по html коду.
Удачи в САЙТА СТРОЕНИИ!
У нас на сайте можно подписаться на обучающий видеокурс "Делаем Сайт Самостоятельно На Яндекс Народ"
Вы узнаете: Как создать сайт на народе. Изучите создание сайта на народе в конструкторе сайтов.
Научитесь, как сделать сайт бесплатно и быстро.
Copyright © 2010-2012. Александр Новиков. Все права защищены.
