Изменение картинки при наведении курсора мыши

Тут нам опять поможет 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>

Закрываем таблицу, закрываем документ.

Теперь давайте рассмотрим интереснейший вопрос, как можно адаптировать сайт под различный размер экрана пользователя.

Шаг 20 - Изменение картинки при наведении курсора мыши