SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Skull Graphics Effect
By Jon Perry

This program scripts the glow, blur and chroma filters to produce an interesting graphics effect, fire around a skull. To achieve this effect, we use JavaScript to script the filter parameters - this program selects a 'firey' colour (high in red, low in blue) and varies the strength of the flame. In addition, by moving the mouse over the skull, the intensity of the flames doubles.

View the Demonstration IE4+ only

Creating the Effect

For clarity of code the initial settings are specified in the <style> element. The skull bitmap is three colours, white, grey and black. The background, eyes, and teeth are white. The color white is made transparent by applying the chroma filter with the color parameter as #FFFFFF (white). This allows the fire to shine through the eyes and teeth.

<HTML>
<HEAD>
<TITLE>Skull</TITLE>
<STYLE>
DIV {position:absolute;
     height:200;
     width:300;
     top:50;
     left:50}
IMG {position:relative;
     height:100;
     width:100;
     top:50;
     left:100;
     filter:chroma(color=#FFFFFF)}
</STYLE>

sf is a variable which governs the strength of flame. If the mouse is over the skull, sf=2, i.e. the flames are generally twice as big.

<SCRIPT>
sf=1;

The fw() function takes the first filter of the ft HTML element, which is the glow filter, and randomly sets both the color and strength parameters

function fw() {
with (ft.filters[0]) {
color=nc();
strength=ns();
}
}

function nc() returns a firey color, ns() returns a random strength, and rnd(n) returns a random number between 0 and n-1.

function nc() {
return (rnd(30)+226)*65536+rnd(256)*256+rnd(30);
}

function ns() {
return sf*(rnd(30)+10);
}

function rnd(n) {
return Math.floor(Math.random()*n);
}

The fw() is to be repeatedly called, and setInterval does this, calling fw() every 0.1 seconds.

setInterval('fw()',100);
</SCRIPT>
</HEAD>

The HTML creates a DIV element to hold the image element, and applies the glow and blur filter to it. There are also two event handlers attached to adjust the flame intensity.

<BODY>
<DIV ID="ft" 
  onmouseover="sf=2;" 
  onmouseout="sf=1;" 
  STYLE="filter:glow() blur(strength=10)">
<IMG SRC="skull.bmp">
</DIV>
</BODY>
</HTML>

Jon Perry is a freelance Author and Programmer from England.

Discuss and Rate this Article

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.