+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Эффект перекатывания Rollover (смена одного изображения на другое, при наведении мыши)

Эффект перекатывания (Rollover) — это переход одного изображения в другое при наведении на него указателя мыши. Навели мышь - рисунок поменялся, убрали мышь - рисунок стал прежним. Этот эффект используется нами в меню. Как сделать?
Например мы имеем рисунок 1.gif и хотим чтобы он менялся на 2.gif. События мыши можно использовать прямо в теге IMG
<img src="1.gif" onMouseOver="this.src='2.gif'" onMouseOut="this.src='1.gif'">

Событие onMouseOver отвечает за наведение курсора мыши на рисунок, а onMouseOut за вывод курсора за пределы изображения.

Использовать эти события можно и в теге A, если рисунок у вас выступает в качестве ссылки.
<a href="#" onMouseOver="document.image.src='2.gif'" onMouseOut="document.image.src='1.gif'">
<img src="1.gif" name="image">
</a>

Необходимо обязательно указать имя рисунка, в нашем примере это image. Таким образом можно использовать много рисунков придавая им различные имена.

В чем проблема? Основная проблема этого эффекта в том, что браузер грузит только первое изображение, а второе начинает загружаться лишь тогда, когда вы наводите на него мышь, т.е. на некоторое время (все зависит от скорости вашего интернета) рисунка нет вообще, лишь пустое место... Некрасиво... Как с этим бороться? Выход конечно же есть, необходимо обратиться к JavaScript.

Создадим файл, например preload.js и запишем туда наши картинки
// массив картинок
img= new Array();
img[0]=new Image(); // картинки 1
img[1]=new Image(); // картинки 2
img[2]=new Image(); // картинки 3

//сами картинки, не ошибитесь с путем...
img[0].src="2.gif"
img[1].src="order_act.gif"
img[2].src="clock.jpg"

Вот и все, теперь все картинки, указанные в этом файле, будут загружены браузером.

И подгружаем данный скрипт на наш сайт, вставляем его между тегами BODY
<body>
<script type="text/javascript" src="preload.js"></script>
</body>


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 8590