Тест S5 Box

Вот примерно так работает модуль в реале...

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

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

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

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

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

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

<img onmouseover="this.src='/images/image1.jpg'" onmouseout="this.src='/images/image2.jpg'" src="/images/image1.jpg">

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

Комментарии   

 
Илья
0 #2 Илья 29.07.2013 17:11
У меня вот такой код:




Подскажи, пожалуйста, куда нужно воткнуть этот, чтобы это заработало
 
 
xam
0 #1 xam 14.03.2013 05:22
Норм прикольно
 
cs-nsk

Последние комментарии

  • Еженедельная газета «Пражский телеграф», ежемесячный ...

    Подробнее...

     
  • mewkid.net/buy-xalanta/ (http://mewkid.net/buy-xalanta/) ...

    Подробнее...

     
  • I see you don't monetize adm-info.ru, don't waste your ...

    Подробнее...

     
  • прошу заметить, что статья была написана в 2011 ...

    Подробнее...

     
  • а по человечески? через терминал как? а не через ...

    Подробнее...

Теги ...

Опрос: iOS или Android ?

Какой ОС вы чаще пользуетесь?

iOS - 0%
Android - 60%
Windows Mobile - 20%
Tizen - 0%
Другая. - 20%

Всего голосов: 5
Голосование в этом опросе закончено в: 01 Янв 2017 - 00:00
Яндекс.Метрика Анализ сайта Рейтинг@Mail.ru