Проводя различные тесты, доказано, что простая ссылка не так заметна посетителям сайта, как ссылка-картинка, которая при наведении меняется на другую картинку, тем самым привлекая пользователя и толкая его на нее нажать.
Скрипт по смене картинки при наведении курсора, будет реализован на css и html, совершено простым образом, без всяких применений javascript. Для этого нам нужно, две картинки как Вы уже поняли, одна активная, а другая пассивная. При наведении на картинку, она меняется на другую, принцип действий очень прост и понятен.
 |
 |
Далее нам потребуются два файла index.php и style.php.
Первая часть. HTML.
В нем мы просто прописываем ссылочку с классом images.
<a href='#' class='images'>a>
Вторая часть. CSS.
В классе a.images, прописываем путь к пассивной картинке, указываем ее как блочный элемент, устанавливаем ширину и высоту картинки. В классе a.images:hover мы только прописываем путь к активной картинке.
a.images {
background: url("images/images_link.png");
display: block;
width: 400px;
height: 200px;
}
a.images:hover {
background: url("images/images_hover.png");
}
Вывод:
Думаю данный урок даст широкий спектр возможностей и применений, ведь данная технология по применению смены картинки при наведении курсора очень проста в реализации. Плюсы: скрипт простой и использует только css и html. Минусы: любая картинка имеет свой вес, а также ее нужно будет создавать в графической программе. Большое спасибо Вам за внимание и проявленный интерес к данному уроку!