Тут нам опять поможет 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>
Закрываем таблицу, закрываем документ. А результат работы даного кода можно посмотреть на этой сылке.
Теперь давайте рассмотрим интереснейший вопрос, как можно адаптировать сайт под различный размер экрана пользователя.