| НАША ГРУППА |
|
|
|
|
 |
| ОБЩЕНИЕ |
|
|
|
|
|
Крупнейший интернет магазин портативной техники всем зашедшим по этой ссылке скидки.
Смена картинки при наведении курсора мыши
Тут нам опять поможет JavaScript. При наведении курсора мыши на объект происходит событие onMouseOver, а при убирании курсора от объекта выполняется событие onMouseOut. А значит нам необходимо описать действия, которые будут выполнятся при выполнении этих событий. Можно для каждого объекта описать процедуру, а можно создать функцию, которая будет менять картинку в зависимости от передаваемых ей аргументов. Выберем последний вариант. Нечто похожее уже рассматривалось нами, когда мы изучали Анимация и JavaScript. Тогда одним из вариантов приводился премер, когда картинки непрерывно меняются при наведении курсора мыши. Пойдем таким же путем. В нашем примере будет три изображения, которые будут менятся при наведении курсора мыши. Значит нам понадобится объявить массив изображений из шести картинок.
<HTML> <HEAD> <TITLE>Смена изображения по наведению курсора</TITLE> <!-- Открываем скрипт --> <script language="JavaScript"> <!-- img=new Array() // Объявляется массив img[0]=new Image() img[1]=new Image() img[2]=new Image() img[3]=new Image() img[4]=new Image() img[5]=new Image()
Далее заполняем этот массив. Присвоим каждому его элементу имя файла с изображением.img[0].src="PreView/11.jpg" img[1].src="PreView/23.jpg" img[2].src="PreView/12.jpg" img[3].src="PreView/22.jpg" img[4].src="PreView/13.jpg" img[5].src="PreView/21.jpg"
Ну а теперь будем описывать нашу функцию, обрабатывающую события:function ChgImg(NumImg,Action) { i=eval(NumImg); if(Action) { document.images[i].src=img[i*2+1].src } else document.images[i].src=img[i*2].src }
Закрываем скрипт://--> </SCRIPT>
В качестве аргументов будут передываться две величины: номер картинки, начинающийся с 0 и действие, принимающее два значения "true", если надо изменить картинку или "false". Номер, картинки передаваемый функции, величина строковая. Для преобразования строковой величины в число используется встроенная функция eval(<строка>), которая вычисляет выражение, находящееся в <строке>. Теперь закрываем заголовок и начинаем описывать само тело документа. Описываем таблицу и в ее ячейках размещаем три наших картинки. В обработчике событий для каждой картинки описываем вызов нашей функции:</head> <body> <TABLE border="0" width=100%> <CAPTION> Изменение картинки при наведении курсора мыши </CAPTION> <tr> <td width=30% align="center"> <img src="PreView/11.jpg" onMouseOver="ChgImg(0,true)" onMouseOut="ChgImg(0,false)" > </td> <td width=30% align="center"> <img src="PreView/12.jpg" onMouseOver="ChgImg(1,true)" onMouseOut="ChgImg(1,false)" > </td> <td width=30% align="center"> <img src="PreView/13.jpg" onMouseOver="ChgImg(2,true)" onMouseOut="ChgImg(2,false)" > </td> </tr> </TABLE> </BODY> </HTML>
Закрываем таблицу, закрываем документ. А результат работы даного кода можно посмотреть на этой сылке. Теперь давайте рассмотрим интереснейший вопрос, как можно адаптировать сайт под различный размер экрана пользователя.| ТРАДИЦИИ КАИ |
|
|
|
| ОСНОВНОЕ |
|
|
|
|
|
|
|
| ОБРАТНАЯ СВЯЗЬ |
|
|
|
|
|