You are here: Home > Scripts > Javascript Image Ripple


	What's New	Doll Makers	Room Makers	Puzzle Makers	Roiworld	Stardoll	Smilies	Links

Back to Scripts

Javascript, Image Ripple (Wave filter)

Requires Internet Explorer 5.5 or later to work
The DIV is located below, before applying image filters the image object requires its layout to be set.
We do that by setting its height and width properties (done inside the style tag).
Having the layout defined can also be done by setting the position attribute to absolute.
Or the layout can be defined by setting the property CONTENTEDITABLE in the div.

To create ripple effects on text and images you would use the wave filter

Wave takes 5 parameters
Add Indicates of the original source image is visible underneath the transformed or rippled image
LightStrength indicates the strength of the light source (creates shadows for the waves), 0 means no shadows are applied, 100 means dark shadows are applied.
Phase Indicates the start of the sine wave, a full cycle is 360 degrees
Strength The size of the waves, 5 means the height of the wave is 5 pixels high (end to end)
Freq Frequency of the wave, 9 means there will be nine distinct waves
Note: the drop shadow does NOT take into account transparency in images and renders them as blocks

Div text

DHTML Source


<!-- This DIV is the target container for the image.  -->  
    <table><tr><td width=100 height=100>
      <div id="mydiv" style="width:80; height:80;">
          <center>
          <img src='../images/BABY_doll.gif' STYLE="width=40; height=28;"><br>
          <font size=1>Div text</font>
          </center>
      </div>
    </td></tr></table>

    <br>
    <br>

<!-- Buttons to manipulate the div.  -->
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Wave(add=false, lightstrength=20, phase=0, strength=3, freq=7)'">Ripple</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Wave(add=false, lightstrength=80, phase=0, strength=3, freq=7)'">Ripple darker</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Wave(add=false, lightstrength=80, phase=10, strength=3, freq=7)'">Ripple phase=10</button><br>
<button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Wave(add=false, lightstrength=80, phase=20, strength=3, freq=7)'">Ripple phase=20</button><br>
<button onclick="mydiv.style.filter=''">Clear Filter</button><br>

References:
MSDN - Wave filter

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License