» Форма входа

»Мoy-weB ver.4.1

» Статистика

 Главная » 2008 » Сентябрь » 10 » Перекат изображения.

Перекат изображения.
10.Сен.2008 | 17:32:33
Перекат изображения.

'Перекат' - такая штука, что
при наведении мыши на изображение оно меняется на другое. Много раз
наверно такое видели, хотя оно реализуемо и чисто на css, но мы про
яваскрипт (минимум smile.gif ). Итак есть два изображения:

[ Популярные и нужные скрипты ] *
[ Популярные и нужные скрипты ] *

Одно (назавём but_one.jpg), это то, которое будет без наведения мыши. Второе (but_two.jpg) становится на место первого при наведии мыши... rolleyes.gif

Теперь собственно само оно:


CODE
<head>
<title>Перекат</title>
<script LANGUAGE="JavaScript">
/*
это прелоуд второй картинки
*/
p2 = new Image;
p2.src = "but_two.jpg";
</SCRIPT>

</head>
<body>
<A
HREF="http://demiart.ru/forum/" onMouseOver="mypicture1.src=p2.src"
onMouseOut="mypicture1.src='but_one.jpg'" target="_blank"><IMG
SRC="but_one.jpg" NAME="mypicture2" width="154" height="59" HSPACE="0"
VSPACE="0" BORDER="0"></A>
</body>
</html>


что это?
Зачем
нам нужен тут этот яваскрипт? Для прелоуда второго изображения (прелоуд
- это предварительная загрузка, тоесть мы его не видим, а он есть...
типа суслика biggrin.gif
)! Прелоуд нужен для того, чтобы после того как мы навели мышь на
изображение небыло пустого места и ожидания загрузки второго
изображения, а оно сразу 'чик' и появилось tongue.gif ! думаю понятно....

итак,
скриптом в верхней части кода мы загружаем вторую картинку, но не
паказываем её. Ей присваивается "имя" - p2.src. Теперь это наш:
but_two.jpg!

теперь это:

CODE
<A
HREF="http://demiart.ru/forum/" onMouseOver="mypicture1.src=p2.src"
onMouseOut="mypicture1.src='but_one.jpg'" target="_blank"><IMG
SRC="but_one.jpg" NAME="mypicture1" width="154" height="59" HSPACE="0"
VSPACE="0" BORDER="0"></A>


собственно тут 'что пишем то и видим'. mda.gif Читаем: наша первая картинка (but_one.jpg) является ссылкой на http://demiart.ru/forum/
(и имеет имя mypicture1), при наведении мыши (onMouseOver) на которую,
имена меняются (mypicture1.src=p2.src), а следовательно и картинки!
Мышь убираем (onMouseOut) и первая картинка опять принимает свой
прежний вид: (mypicture1.src='but_one.jpg)
всё....
Категория: Скрипты для UCOZ | Просмотров: 1369 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]