Давайте рассмотрим быстрый и главное простой способ, как добавить красивый эффект при наведения на картинку или графику, которая изначально использует ссылку для перехода. Или по другому сказать, это якорный HTML-элемент, который используется для перехода по ссылки на другую веб-страницу или местоположение.
HTML-метод наведения начнем использовать в этой статье, также называется эффектом наведения мыши, поскольку он использует событие изображений для манипулирования графикой ссылки. Для этого примера эффекта наведения не используются каскадные таблицы стилей CSS.
Что такое ссылка на веб-страницу в HTML
Например, для ссылки на домашнюю страницу этого сайта HTML-код будет:
Код
<a href="http://zornet.ru">ZorNet - портал для вебмастера</a>
В браузере это выглядит как ссылка:
Как я могу использовать изображение для ссылки
Вместо простой текстовой ссылки для замены текста можно использовать элемент img. Задайте для атрибута src изображения HTML адрес изображения URL или путь к веб-серверу изображения:
Код
<a href="http://zornet.ru/forum/51-7987-1"><img src="http://zornet.ru/_fr/79/1454343.jpg" alt="zornet.ru"/></a>
В этом случае ссылка теперь отображается в виде домашней графики:
Как сгенерировать HTML-эффект при наведении изображения
Эффект мыши над изображением использует два событие, onmouseover и onmouseout. Где эффекты наведения изображения активируются при возникновении событий, когда мышь перемещается над графиком и затем удаляется от графика. Во-первых, для эффекта требуются две графики, обычно одно и то же изображение разных цветов.
Вот изображения, что используется для этого примера:
HTML-код эффекта изображения при наведении курсора устанавливает атрибут image src для исходного кода на правильное изображение.
Код
<a href="http://zornet.ru"><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/home.png" alt="zornet.ru" onmouseover="this.src='http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/home-g.png';" onmouseout="this.src='http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/home.png';"/></a>
С этим кодом при наведении курсора мыши на домашнее изображение он становится зеленым:
Демонстрация
