23 января 2013
19190
Смена картинки при наведении курсора

Смена картинки при наведении курсора на css и html

CSS
Демонстрация » Скачать »

Проводя различные тесты, доказано, что простая ссылка не так заметна посетителям сайта, как ссылка-картинка, которая при наведении меняется на другую картинку, тем самым привлекая пользователя и толкая его на нее нажать.

 

Скрипт по смене картинки при наведении курсора, будет реализован на 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. Минусы: любая картинка имеет свой вес, а также ее нужно будет создавать в графической программе. Большое спасибо Вам за внимание и проявленный интерес к данному уроку!