Expert: Andre Hickman - 7/28/2009

Question
QUESTION: Hi i own a website 4thGearPinned.com about a year ago i came across a website that had a banner when you moved your cursor over it turned into a liquid/water effect as though you had dropped a stone in a puddle , i have searched the internet and cant find how to do this, i would like to add this effect to my website pictures on the home page to give it that special edge, i would really appreciate it if you had the code or could tell me how to do this, Thanks

Gavin

ANSWER: Hey Gavin,

I knew a Gavin once in 2nd Life(the online game)...Gav is that you? LOL...ok, back to business.

What you were looking at was more than likely a java applet/script.  Here is a link to one.  Let me know if this is what you were talking about.  If so, then you can find stuff like this by doing a web search on "java applets" or get more specific "java applet ripple" or something like that.

http://www.bringyou.to/java/waterpic.htm

Hope this is similar. If not, let me know, and I will see what else I can find.

Cheers,
Andre

---------- FOLLOW-UP ----------

QUESTION: Hi Andre, Years ago i used to play half life online...

The link you sent is exactly what i'm after i have looked at the read me file and it gives instructions how to use it but i cant understand them, would you be able to explain how i use it in lay mans terms ..

the read me text is as follows

2. How to use

All that is needed is a few lines of HTML code added to your page, your favorite picture, and the DropWater3D.class file and Vector3D.class file. Put the files in this archive into the same folder.

<APPLET CODE="DropWater3D.class" WIDTH="200" HEIGHT="200">
<PARAM NAME="IMG" VALUE="mback.jpg"><!-- background image(jpg/gif/png) -->
<PARAM NAME="BACK" VALUE="FFFFFF"><!-- background color(RRGGBB) -->
<PARAM NAME="FORE" VALUE="6655FF"><!-- text color(RRGGBB) -->
<PARAM NAME="SCALE" VALUE="1.0"><!-- default magnification(0.0-) -->
<PARAM NAME="INTERVAL" VALUE="256"><!-- automatic ripple interval(0-) -->
<PARAM NAME="3D" VALUE="ON"><!-- permission of 3D(ON/OFF) -->
You need browser equipping Java.
</APPLET>

Change the VALUE up or down to get the effect that you want.
If you change the image, you need change the parameters of WIDTH or HEIGHT in the APPLET tag.

- Danger -
A large width or a large height makes the running speed slower.

Answer
Lol...Half-life.  I used to play that too.  No, I was talking about 2nd Life, which is a virtual reality social world.

Ok, this is what you need to do:

1) wherever the html file is for the page that you are putting the button on, put all of the files included there.

2) That in applet code that you posted, the width and height need to match your image file.

3) The image file doesn't necessarily have to be in the same folder as the html file, but the link needs to be relative to where the file is.  For instance, if you have a .jpg named "dog.jpg" but it is in a subfolder "images", then the line should read:
   
      <PARAM NAME="IMG" VALUE="images\dog.jpg">

4) The BACK and FORE values are hexedecimal values for a specific color.  BACK seems to be the color that shows on the edges when the image ripples out of place and there are no pixels left to displace.  FORE seems to be the text color that you can type on the image.  

Hexedecimal numbers (Hex numbers) are a mix of RGB (red,green and blue) values. "FFFFF" means FF-red, FF-blue, FF-green, which is the highest luminance value that each color can have.  It equates to having 100% of each color, making "FFFFFF" the hex number for white.  Conversely, "000000" is the hex number for black.  Here is a link to a site that has a table of hex colors:

http://www.blythe.org/webwork/numbercolor.html

5) All of that <APPLET>.....</APPLET> code needs to be pasted in your html file.

Let me know if that is laymen enough, or if I need to break it down further.

Cheers,
Andre