3 State button (like 2 state checkbox) [RESOLVED]

I need a selection for:
Not Started
In Progress
Completed

I would have used a drop down box, but I want to use only the space that the graphic of a checkbox would take.

Is there a way that my user could click on say, an unchecked checkbox and have a small popup that displays the three selections? I don't want a slow loading window.

Or better yet, have them click on a graphic the size of a checkbox and have it rotate among the 3 states (like a checkbox toggles among 2 states). I have the 3 images already that correspond to the 3 states above.

Thanks.

function do3state(myType){
if(myType.src.indexOf("notStarted") != -1){
myType.src="../../images/prodsched/inProcess.gif";
}else if(myType.src.indexOf("inProcess") != -1){
myType.src="../../images/prodsched/completed.gif";
}else if(myType.src.indexOf("completed") != -1){
myType.src="../../images/prodsched/notStarted.gif";
}
}

<TD><CENTER><IMG NAME="vCarriage" SRC="../../images/prodsched/notStarted.gif" onclick="do3state(this);";></CENTER></TD>

I'm assuming that the IMG SRC will be passed to my script, but I haven't checked yet.

function do3state(myType,theHiddenName){
if(myType.src.indexOf("notStarted") != -1){
myType.src="../../images/prodsched/inProcess.gif";
theHiddenName.value=1;
}else if(myType.src.indexOf("inProcess") != -1){
myType.src="../../images/prodsched/completed.gif";
theHiddenName.value=2;
}else if(myType.src.indexOf("completed") != -1){
myType.src="../../images/prodsched/notStarted.gif";
theHiddenName.value=0;
}
}

<TD><CENTER>
<INPUT TYPE=HIDDEN NAME="aHiddenName">
<IMG SRC="../../images/prodsched/notStarted.gif" onclick="do3state(this,aHiddenName);";>
</CENTER></TD>

Apparently the name attribute for IMG has been dropped per w3c.org, so the hidden field can be passed to carry the state info, and it can be updated by the do3state function.