Express-O-matic

Did you know that you can buy Tully's Espresso in By George?

Consider the following graphic that advertizes Tully's Espresso

As you can see, one has to "click for menus". Suppose Joyce Nickels of By George hires you to build a web widget to use on this page. The goal is to make the ordering of a coffee drink more interactive.

"We don't want 'Espress-O-Matic'," she tells you, "we want 'Express-O-Matic'."

What she means by this subtle shift from 's' to 'x' is that her customers can EXPRESS themselves by DIALING exactly the type of coffee drink they desire.

The idea is illustrated below. Here is an image of a coffee cup where a part of the surface of the coffee drink is transparent. The color that shows through is the background color of the hosting DIV. Click the buttons to change the background color of the hosting DIV.

Code

<style type="text/css">
#pictureDiv {
 	width: 125px;
	height: 93px;
	background-image: url(coffeeCupMask.gif);
	background-repeat: no-repeat; 
	background-color: green;
}
</style>

<div id="pictureDiv"></div>

Joyce's idea is to use a slider on the web page that would permit coffee drinkers to choose from among these three delicious brews, and see the difference by watching the changing color of the coffee drink:

As you can see, the three delicious brews are a different color. In the following widget, you click on a coffee name to select the coffee brand and then move the slider to select the strength. The strength is indicated by a red bar that moves up and down. The video on this page illustrates how the widget works.