Продолжая серию статей об эффектах фильтров в JavaScript хочется заметить, что совершенно не очевидно, почему разработчики Mozilla, Opera и Netscape не включили подобные компоненты в своих приложения. Эффект придают не просто необычности вашим веб страницам, но и производят очень хорошее влияние на посетителей, а также могут быть весьма полезны при разработке дизайна.

В данной статье я расскажу, как сделать подсвечивание картинки при помощи фильтра Light и языка скриптов JavaScript. Причем подсвечивание будет выполняться в точке перемещения указателя мыши.

Код скрипта:

< style>
#myimage { filter: light; cursor: hand }
< /style>
< img src="cow.jpg" id=myimage>

< script language=JavaScript>

s = 90;
vp = 50;
document.all.myimage.onmousemove = lightMouse;
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(0,0,s,255,255,255,255)

function lightMouse()
{
xv = event.offsetX;
yv = event.offsetY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
} 

< /script> 

А теперь немного подробней о тех действиях, которые выполняет скрипт. Мы вывели картинку cow.jpg, которой задали свойства фильтра light. Теперь необходимо задать функцию, которая будет выполняться при перемещении указателя мыши по данной картинке:

document.all.myimage.onmousemove = lightMouse

Настроем наше изображение и определим основные параметры света.

myimage.filters.light.addAmbient(255,255,255,vp)

Здесь мы можем ограничить цвета, в которых картинка будет отображаться. Например, можно задать параметры {255,255,0) – исключаем синий цвет, {0, 255, 255} – исключаем красный цвет и т.д. vp – это степень затемненности картинки, чем она меньше, тем изображение будет темнее.

myimage.filters.light.addPoint(0,0,s,255,255,255,255)

Первые два параметра функции addPoint определяют, где по умолчанию будет установлена точка освещенности. s – определяет степень рассеянности изображения. Следующие три параметры определяют цвет освещенности. В принципе вы можете изменять данные параметры по вашему усмотрению.

function lightMouse()
{
xv = event.offsetX;
yv = event.offsetY;
myimage.filters.light.MoveLight(1,xv,yv,s,true)
} 

Определяем координаты мыши event.offsetX и event.offsetY и выводим точку освещенности.