Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Light

Use the Light filter to simulate the projection of a light source onto the selected object. You can control the position of the light source, the co-ordinates of the focus of the light source, whether the light has hard or diffuse edges, the colour and intensity of the light. I think you always need to bit of script to call the object.

You can use the following light filters:

  • AddAmbient. Adds an ambient light source that dims or strengthens the light cast on a picture. It lights the entire area and allows you make the whole picture brighter or darker. You can add the colour of the light and strength
  • AddCone. Adds a cone light source that fades with the distance from the target x,y position. It has a hard edge at the near edge of the cone light's focus and fades gradually as it reaches the distance threshold. You can specify the co-ordinates of the source and target, the colour and strength of the light and the angle of spread
  • AddPoint. Adds point light source. You can specify the co-ordinates, the colour and strength of the light
  • ChangeColor. Changes the colour of the light
  • ChangeStrength. Changes the strength of the light
  • Clear. Clears all lights
  • MoveLight. Moves the light source for a cone light or a point light. For cone lights, this changes the focus of the light. For point lights, this moves the entire light to a new location

Here is some example code:

<html>
<head><title>Light Filter Effects</title></head>
<body>
<table width="380">
<tr>
<td width=50%>The normal picture<p>
<img src="image.jpg" width="100" height="66"></td>
<td width=50%>
Ambient Light Filter<p>
<div id="picture2" style="width:100;height:66;filter:Light">
<img src="image.jpg" width="100" height="66">
</div>
</td>
</tr>
<tr>
<td width=50%>
Cone Light Filter<p>
<div id="picture3" style="width:100;height:66;filter:light">
<img src="image.jpg" width="100" height="66">
</div>
</td>
<td width=50%>
Point Light Filter<p>
<div id="picture4" style="width:100;height:66;filter:light">
<img src="image.jpg" width="100" height="66">
</div>
</td>
</tr>
</table>
<script language="VBScript">
call picture2.filters(0).addAmbient(255, 255, 255, 60)
call picture3.filters(0).addCone(5, 5, 5, 60, 60, 255, 
255, 255, 60, 30)
call picture4.filters(0).addPoint(20,20, 50, 255, 255, 
255, 100)
</script> 
</body>
</html>

Here's what it looks like: