Итак, 2011-08-22 стартуют поиски самого простого jQuery ролловера.
материал будет меняться
Что такое Rollover?
Это когда наводишь на изображение, и на его месте появляется другое. Это элементарнейший трюк с заменой атрибута src у элемента img, и на самом деле написать подобную функцию даже на javascript не составляет особого труда.
Но сегодня рулят фреймворки, в нашем случае jQuery. И писать на чистом яваскрипт особого смысла нет.
Потому, я буду искать самый просто способ реализовать это на jQuery/
В интернете в принципе немало материалов на тему, но хочется найти что-нибудь ультрапростое.
Нашел я простой jquery-плагин rollover
Хорош он тем, что очень прост и понятен
Что мы делаем
1 Подключаем jQuery
2 Подключаем плагин
3 инициализируем его всего одной строчкой (!)
1 2 3 | <script type="text/javascript"> jQuery('img').rollover(true); </script> |
4 и создаем рядом с заменямым изображением img_src_h.png
На примере:
Есть
1 | <img src="img_src.png" alt="" /> |
Нужен
ролловер на img_src_h.png
1 создаем img_src_h.png, заливаем в ту же директорию что и исходное
2 Вставляем скрипт выше
Теперь при наведении, src нашего изображения будет меняться.
Просто? Предельно.Есть проще? Ищем =)
проще?
onmouseover=this.src=’hover_image.png’; onmouseout=this.src=»;
всё.