В этой статье я постараюсь доступным языком объяснить, как при помощи JavaScript можно сделать эффект плавного затемнения и осветления изображений. Для примера наведите курсором на изображения цветов, расположенных выше. Необходимо заметить, что данный эффект будет работать только под браузером Internet Explorer и его надстройками.

Таким образом задача сводится к следующему: необходимо создать эффект плавного перехода от полуяркой к четкой картинки при наведении на нее курсором. При этом необходимо создать эффект возврата в исходную позицию.
Текст кода на JavaScript для создания эффекта света выглядит следующим образом:

< script language=JavaScript>

var opac = new Array(30, 30, 30, 30);
var pict = new Array('al1', 'al2', 'al3', 'al4');
var tt = new Array();
var tt2 = new Array();

function light(q) {
opac[q]+=2;
document.getElementById(pict[q]).style.filter="alpha(opacity="+opac[q]+")";
tt[q] = setTimeout("light("+q+")",30);
if (opac[q]==100) clearTimeout(tt[q]);
};

function unlight(q) {
if (opac[q]!=30) opac[q]-=2;
document.getElementById(pict[q]).style.filter="alpha(opacity="+opac[q]+")";
tt2[q] = setTimeout("unlight("+q+")",30);
if (opac[q]==30) clearTimeout(tt2[q]);
};
< /script>

Разберем дословно каждую строку кода. Во-первых, для изменения яркости объекта ( рисунка) мы используем фильтр alpha(opacity=n), где n - процентное значение яркости объекта (при n=100 рисунок отображается как есть).

opac - массив, содержащий текущие значения параметров n для фильтра для каждого объекта.

pict - массив, содержащий идентификаторы (имена) рисунков (т.е. параметр свойства < img name='имя русунка'...).

Нетрудно дагадаться, что количество элементов в массивах opac и pict должно совпадать с количеством рисунков.

Массивы tt и tt2 будут содержать идентификаторы таймеров, о которых мы поговорим ниже.

< img src='dahlia.jpg' onmouseover='clearTimeout(tt2[0]); light(0)' onmouseout='clearTimeout(tt[0]); unlight(0)' name=al1 style='filter: alpha(opacity=30)'>

< img src='scabious.jpg' onmouseover='clearTimeout(tt2[1]); light(1)' onmouseout='clearTimeout(tt[1]); unlight(1)' name=al2 style='filter: alpha(opacity=30)'>

< img src='canna.jpg' onmouseover='clearTimeout(tt2[2]); light(2)' onmouseout='clearTimeout(tt[2]); unlight(2)' name=al3 style='filter: alpha(opacity=30)'>

< img src='orange.jpg' onmouseover='clearTimeout(tt2[3]); light(3)' onmouseout='clearTimeout(tt[3]); unlight(3)' name=al4 style='filter: alpha(opacity=30)'>

При наведении указателя мыши на картинку вызывается обработчик событий OnMouseOver и выполняются следующие действия: прекращается работа таймера и выполняется функция Light(q), где q - порядковый номер картинки. Рассмотрим подробно данную функцию.
<pre>opac[q]+=2

указывает, что яркость картинки по данному порядковому номеру увеличивается на 2.

document.getElementById(pict[q]).style.filter="alpha(opacity="+opac[q]+")"

непосредственно изменяет яркость картинки в зависимости от ее порядкового номера (q) и значения ее яркости (opac[q]).

tt[q] = setTimeout("light("+q+")",30)

создает таймер, который будет выполнять процедуру Light[q] с частотов в 0,03 секунды.

if (opac[q]==100) clearTimeout(tt[q])

проверят, достигло ли значение яркости картинки 100%, если да, то прекращает выполнение процедуры (уничтожает таймер).

Если убрать указатель мыши с картинки, то будет выполнен обработчик событий OnMouseOut. Данный обработчик запускает на выполнение процедуру Unlight(q). Данная функция выполняет аналогичные действия, что и функция Light(q), но в отличие от нее не повышает, а понижает яркость картинки:

opac[q]-=2

а также создает таймер, который будет вызывать данную функцию, пока яркость картинки не понизится до первоначальных 30%:

if (opac[q]==30) clearTimeout(tt2[q])

Вы можете по своему усмотрению изменять, с какой частотой будут выполнятся функции, на сколько процентов будут увеличиваться или уменьшаться яркость картинки. Однако для создании плавного эффекта необходимо что бы функции выполнялись в пределах 0,02-0,05 секундах, а значение яркости изменялось в границах 2-5 процентов.