DHTML - Filters - light()
|
|
The light filter allows light to be projected
onto an object. Its syntax is:
object.style.filter = "light(sProperties)"
or as HTML:
<ELEMENT STYLE = "filter: light(sProperties)"
... >
The only parameter is enabled, which sets/get whether the
filter is enabled. The following gives an example of the filter:
<img style="filter:invert()" src="pics_cookie.jpg"
width="600" height="450">
The parameters are:
" addAmbient Applies an ambient light to the filter.
" addCone Applies cone light to the filter.
" addPoint . Applies a pin point of light that shines
in all directions.
" changeColor. Changes the light color.
" changeStrength Changes light intensity.
" clear. Clears all the applied lights.
" enabled. Sets or gets whether the filter is currently
enabled.
" moveLight. Moves the light effect on the page.
The following gives an example of moving
a light source with the mouse. Initially, on the page load
event (onload) a point source of light is added to (150,150),
with while light (255,255,255). This is then moved around
on the mouse event (onMouseMove).
DHTML example
|
|
<body onload = "setlight()"
style = "background-color: white">
<script language="JavaScript">
function setlight( )
{
myImg.filters( "light" ).addPoint( 150, 150,125,
255, 255, 255, 100 );
}
function movelight()
{
eX = event.offsetX;
eY = event.offsetY;
xCoordinate = Math.round( eX-event.srcElement.width
/ 2, 0 );
yCoordinate = Math.round( eY-event.srcElement.height
/ 2, 0 );
myImg.filters( "light" ).moveLight( 0, eX,
eY, 125, 1 );
}
// -->
</script>
</p>
<p align="center"> <img id = "myImg"
src = "pics_cookie.jpg"
style = "top: 100; left: 100; filter: light()"
onMouseMove = "movelight()" width="400"
height="300" />
</body>
|
Executed code
|
|
Move your mouse over the text to see the light filter.
NOTE: This only works with Internet Explorer 5.5, and
on.
|
|
