DHTML - Filters - dropshadow()

The dropshadow filter projects a shadow of the object. Its syntax is:

object.style.filter = "dropshadow(sProperties)"

or as HTML:

- color. Sets/gets color applied with the filter.
- enabled. Sets/gets if the filter is enabled.
- offX. Sets/gets x-axis offset of the drop shadow.
- offY. Sets/gets y-axis offset of the drop shadow.
- positive. Sets/gets if drop shadow has nontransparent pixels of the object.

DHTML example

<h1>DROP SHADOW
<script type = "text/javascript">
<!--

function run()
{
eX = event.offsetX;
eY = event.offsetY;

xCoordinate = Math.round(
eX-event.srcElement.width / 2, 0 );
yCoordinate = Math.round(
eY-event.srcElement.height / 2, 0 );

dsImg.filters( "dropShadow" ).offx = xCoordinate / -3;
dsImg.filters( "dropShadow" ).offy = yCoordinate / -3;

dsImg.filters( "light" ).moveLight( 0, eX, eY, 125, 1 );
}

</script>

NOTE: This only works with Internet Explorer 5.5, and on.
</p>
<div align="center"><img id = "dsImg" src = "nos_project_graphic01.gif"
style = "top: 100; left: 100; filter: dropShadow(
offx = 0, offy = 0, color = black )"
onmousemove = "run()" alt = "Circle Image" width="550" height="406" /></div>

Executed code

Move your mouse over the text to see the drop shadow. NOTE: This only works with Internet Explorer 5.5, and on.

Page maintained by bill