Developer

Stupid Web Tricks: Water, water, everywhere

Here are two ways to accomplish reflective images on your Web page.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham

...nor any drop to drink. So why is this trick so popular? After all, it only displays an upside-down, backward, and wavy version of an image that you've already seen. Nonetheless, we've received many e-mails from readers pointing us to URLs with reflecting images, asking us "How did they do it?" OK, maybe it is visually stunning. Maybe we should, just this one time, bow to reader demand. And because we are zealous in our work, we will show you two ways to accomplish this trick, one using an IE-only JavaScript and one using a Java applet. So, if you must have your dancing waters, vanity mirror, sloshy vodka, meditation pool, or what have you, we can now say, "Grab your board! Surf's up!"

Catch a wave

It's high tide and the waters have reached your Web page. Using Microsoft's JavaScript Filter object (which works only in Windows IE) you can re-create the ubiquitous water-reflection applet relatively easily and without using Java. Insert this code in the <body> of your page, adjusting the image filename, width, and height to match the image that you want to make reflective:

<img id=mirror src="your_picture_here.jpg" width="290" height="294">
<script language=JavaScript>
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (document.all){
document.write('<img id=mdiv src="'+document.all.mirror.src+'"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">')
window.onload=f1
}
</script>

You can play with the strength (width of vertical wave), frequency (number of horizontal waves), lightstrength (darkness of wave), and phase (where the wave starts its visible cycle on the picture) variables to achieve your own roiling version of the watery deep.

Braver souls; stronger liquids

You must have your Java, must you? The delightfully named and suitably ancient Dorian Gray II applet produces the above effect (as does Anfy's Lake applet) and lets you use a different source file for the reflected image if you'd like to play the "in a mirror darkly" game. First, download the ZIP file DorianGrey2.zip, decompress it, and save the DorianGray_II.class file and your picture(s) in the same directory as the Web page on which you want them to appear. Paste this code into the <body> of your Web page and replace the image-size values and the picture name with your own (you may want to play around with the height dimension of the reflection to give it that extra degree of verisimilitude).

Dorian Grey II applet code

<img src="your_picture_here.jpg" width="293" height="297"><br>
<applet code="DorianGray_II.class" width="293" height="262">
<param name="image" value="frs16-8a.jpg">
<param name="bgcolor" value="000000">
<param name="loadtext" value="Loading reflection">
<param name="textcolor" value="ff0000">
<param name="mode" value="1">
<param name="speed" value="5">
<param name="frames" value="12">
<param name="status" value="Welcome to the Dorian Grey Applet II">
<param name="outtext" value="">
<param name="intext" value="">
<param name="text" value="">
<param name="sound" value="">
<param name="href" value=" ">
<param name="target" value="_self">
</applet>

If you are not using tables, you may need to use a nonbreaking space (&nbsp;) in the second line to align your images, like so:

 <applet code="DorianGray_II.class" width="189" height="210">

Also, this applet is case-sensitive, so wot.jpg and Wot.jpg are not the same. Be extra careful when entering your image filenames.

You can also control the appearance of the applet by adjusting some of the parameters in the applet code: mode, with a range from 0 to 5, regulates the size of the ripples in the reflection; speed, which can be set from 1 to 5, regulates the—you guessed it—speed of ripples in the reflection. The frames parameter is visually almost indistinguishable from speed, but it can slow loading time, so it's best to leave frames blank and let it use its default. If you do want to experiment, frames has a range from 9 to 14.

This is all you need to make your images reflect in any Java-capable browser, but If you want to investigate the other available parameters for this applet, take a look at the Dorian Grey II parameter page.

To quote Ciardi (translating Dante, or was it Bacardi?), "We all must drown in something," and sometimes that's reader demand for water applets. Our thanks to all of the readers who've requested this trick over the past six months.

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Editor's Picks