Замена картинок при наведении курсора
Предлагаю два варианта: с помощью CSS и второй Javascript.
1. C помощью CSS
Смотреть пример отдельной страницей >>
Для этого используем селектор :hover. При наведении на картинку, происходит замена свойств одного класса на другой, с помощью этого селектора.
Пример:
a {display:block; width:100px; height:100px; background:url(1)}
a:hover { background:url(2) }
display:block;- выводит ссылку как текстовый блок, это нужно для задания размеров, высоты и ширины
width:100px; height:100px высота и ширина блока (в данном случае размер картинки)
background – фон, наша кнопка
При наведении на картинку, свойства класса “a” меняются на свойства a:hover.
Использовать этот селектор можно и с другими тегами, но в ИЕ селектор :hover воспринимается только для ссылок. Решить эту проблему можно с помощью Javascript. Эту проблему рассмотрим в другом примере
2 C помощью Javascript
Смотреть пример отдельной страницей >>
Обрабатываем события наведения курсора на картинку и отвода курсора.
Саму подмену можно вынести в отдельную функцию, или оставить в теге, мы оставим.
Пример:
<img src="images/img1.jpg" onmouseover="this.src='images/img2.jpg'" onmouseout="this.src='images/img1.jpg'" />
onmouseover – курсор над картинкой
onmouseout – курсор в стороне от картинки
С помощью этих свойств можно организовать галерею или сделать красивое меню не используя флешь.
