2012-10-27

Rollover эффект для изображения


Для создания анимации изображения посредством html, а точнее обычной смены картинок одну на другую при наведении курсора), нам понадобится две картинки. Это еще называется Rollover эффектом. Создавать его будет с помощью команды onMouseOver. Вот как это выглядит (наведите мышку на картинку)
Где это может пригодится?
Rollover эффект идеально подойдет для создания кнопок. По такой кнопке так и хочется кликнуть! Как вариант, можно сделать такую кнопку для подписки на рассылку, feedburner или для кнопок социальных сетей.
html код Rollover эффекта для изображения:
..
<a href="url страницы, на которую ведет кнопка"><img src="URL первого кадра / первого изображения" onmouseover="this.src='URL второго кадра / второго изображения'" onmouseout=" this.src='URL первого кадра / первого изображения'" /></a>
Рассмотрим на примере:
У нас есть 2 исходных изображения:

http://3.bp.blogspot.com/-_c_xwPEtPBQ/T_M5s2-LAJI/AAAAAAAAHT4/Jh7jdOBl2bs/s1600/rollover-image-1.png

http://2.bp.blogspot.com/-H6GkoZM5Iqs/T_M5tjibnQI/AAAAAAAAHT8/_ws1yS9B7i4/s1600/rollover-image-2.png
Нужно сделать смену изображений при помощи команды onMouseOver.
Подставляем ссылки на изображения в html код Rollover и получаем:
<a href=http://blogger.com/><img src="http://3.bp.blogspot.com/-_c_xwPEtPBQ/T_M5s2-LAJI/AAAAAAAAHT4/Jh7jdOBl2bs/s1600/rollover-image-1.png" onmouseover="this.src='http://2.bp.blogspot.com/-H6GkoZM5Iqs/T_M5tjibnQI/AAAAAAAAHT8/_ws1yS9B7i4/s1600/rollover-image-2.png" onmouseout=" this.src=' http://3.bp.blogspot.com/-_c_xwPEtPBQ/T_M5s2-LAJI/AAAAAAAAHT4/Jh7jdOBl2bs/s1600/rollover-image-1.pn" /></a>

3 комментария :

Сергей комментирует...

Спасибо за урок! Обязательно попробую.

Антонина Романова комментирует...

Круто! Спасибо! Надо попробовать!

Анонимный комментирует...

Всё просто и работает, теперь надо как то сделать надпись на кнопке.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML