Смена изображения при наведении курсора

Замена изображения при наведении курсораСледующий пост хочу посвятить еще одному интересному приему, который легко можно применить на сайте.

Бывают случаи когда на станице нашего сайта имеется изображение, которое является еще и ссылкой. Я хочу предложить вам делать такие изображения немногоболее интересными чем просто ничем не примечательное изображение при наведении на которое меняется курсор. Давайте сделаем эфект изменения изображения при наведении на него курсора

Метод, который мы будем использовать я выбрал самый простой, что очень не плохо, так как не будет никаких лишних скриптов загружающих сайт.

Для изображения, в html, существует событие — onmouseoveronmouseout. Данное событие работает со всеми интернет браузерами.

Давайте научимся его применять, рассмотрим следующий скрипт.

<img onmouseoverthis.src=’/images/image1.jpg’« onmouseoutthis.src=’/images/image2.jpg« src/images/image1.jpg«>

  • onmouseover — событие вызывающее исходное изображение;
  • onmouseout — событие срабатывающее при наведении на изображение курсором мыши. Вызывает замену изображения на указанное в параметрах onmouseout (в данном случае image2.jpg);
  • src — путь к нашему исходному изображению.

  • P.S.»Пример работы скрипта виден при наведении курсора на изображение в верху поста.»
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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