Главная » (X)HTML » Реализация меняющегося изображения при наведении на него курсора мыши
Апр
04

Реализация меняющегося изображения при наведении на него курсора мыши

Нашли то единственное изображение?

Чтобы реализовать данное действие необходимо знать очень мало. А вот сделать с этого можно достаточно много! Уверен что каждый из вас когда-то хотел сделать меняющееся изображении при наведении на него курсора мыши? Я прав?

Для реализации меняющего изображения необходимо заранее иметь 2 изображения одного размера. Теперь когда у вас все готово переходим к реализации данного мигания на интернет странице.




Создаем стили:

[css]
<style type="text/css">

<!— изображение до наведения на него —>

.tom {width: 100px; height: 100px; background: url(http://kpeople.ru/wp-content/uploads/2012/04/2.png); }

<!— вывод второго изображения после наведения на первое —>

.tom:hover { background: url(http://kpeople.ru/wp-content/uploads/2012/04/1.png); }

</style>
[/css]

Выводим на интернет страницу:

[css]
<div class="tom"></div>
[/css]

Вот и все, пользуйтесь на здоровье. Если есть вопросы — задавайте. Если нету, а у вас есть желание научится еще чему-то интересному, то подписывайтесь на обновления в форме предоставленной немного ниже.



Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




Подтвердите подписку в письме пришедшем на Почту, после чего начнете получить рассылку.