I would like to create a poll/pick page with onMouseClick event on it.
The problem is that I don't know how can I reach my desired effects.
I have 4 pics on the page: TEAM1, TEAM2, DRAW, QUESTION.
If a visitor would like to poll for the result of the sport event have to click on one of the picture.
If click on the first - the 4th picture (a question mark) will change to the first team's logo;
If click on the second - the 4th picture will change to the second team's logo;
If click on the third - the 4th picture will change to the draw logo.


A part of CSS section

Code:
<STYLE TYPE="text/css" MEDIA=screen>
.oddrow {
    background-color: #CCCCCC;
    text-align: center;
}
.evenrow {
    background-color: #888888;
    text-align: center;
}
.logos {
    background-image: url(data:image/png;base64,iVBO.........Rw0K);
    background-position: -50px 0;
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
}
.logo-quest {
    background-image: url(data:image/png;base64,iVBOR........w0KG);
    background-position: 0 0;
    height: 50px;
    width: 50px;
}
.logo-equal {
    background-image: url(data:image/png;base64,iVBO........Rw0K);
    background-position: 0 0;
    height: 50px;
    width: 50px;
}
.logo-team1 {
    background-position: 0 0;
}
.logo-team2 {
    background-position: 0 -50px;
}
...
</STYLE>
A part of BODY section

Code:
<tr class="evenrow">
<td>TEAM1'S NAME<br>TEAM2'S NAME</td>
<td><div class="logo-team1 logos">&nbsp;</div></td>
<td><div class="logo-team2 logos">&nbsp;</div></td>
<td><div class="logo-equal logos">&nbsp;</div></td>
<td><div class="logo-quest logos">&nbsp;</div></td>
</tr>
I can make a simple version of onMouse* event, but how can I use it if I want to change the 4th picture?
And is it possible to use encoded pictures from CSS? What is the good syntaxes for that?

Thank you in advance and sorry for my english!
Jack