Able to create a dial that allows user to control a fade from one image to another?

I am trying to use java or jquery to create an image that fades from one picture to another when a website user turns up a dial I create on the page.

The image below shows basically what it will look like. The dial starts on “dark”, which displays a picture of an unlit piece of stone. As the user starts to move the dial towards “bright”, the image fades into a picture of a backlit piece of the same stone, giving off the impression the stone is slowly being lit up.

Is there a way to do this with java or do I need to use flash?

With Java there may be a way, but we don’t deal with Java here. That’s an applet-based language that is used to do very different things from JavaScript. The languages don’t cross over either. The only similarity between them is that they both start with the same letters. They’re like car and carpet.

Back to the issue at hand though - you can use CSS to place a second image over the top of the first one, and then adjust its opacity from 0 up to full.