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
<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
<tr class="evenrow">
<td>TEAM1'S NAME<br>TEAM2'S NAME</td>
<td><div class="logo-team1 logos"> </div></td>
<td><div class="logo-team2 logos"> </div></td>
<td><div class="logo-equal logos"> </div></td>
<td><div class="logo-quest logos"> </div></td>
</tr>
[SIZE=3][FONT=Courier New]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[/FONT][/SIZE]
What you seem to require is for the class name of the last div to be replaced by that from the one that was clicked.
The CSS forum would know a lot more about such CSS things.
[SIZE=3][FONT=Courier New]Ehh, I will give up. 
I try many ways w/o any success.
Paul Wilkins, thank you for your help but this problem is too high for me at this time, I think.
And there is not one row just, there is at least 16… It is the NFL. 
In Hungary are lot of fan of this great sport…
Here is the source w/ 2 rows - a friend said that is not possible by that way what I want.[/FONT][/SIZE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8” />
<title>NFL - 4. hét</title>
<meta name=“keywords” content=“NFL The-West” />
<meta name=“description” content=“Tippösszesítő az NFL 4. heti fordulójához” />
<meta name=“author” content=“Jack” />
<meta name=“robots” content=“none” />
<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,iVBOR…YII=);
background-position: -50px 0;
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
.logo-qes {
background-image: url(data:image/png;base64,iVBOR…gg==);
background-position: 0 0;
height: 50px;
width: 50px;
}
.logo-equ {
background-image: url(data:image/png;base64,iVBOR…gg==);
background-position: 0 0;
height: 50px;
width: 50px;
}
.logo-buf {
background-position: 0 -250px;
}
.logo-car {
background-position: 0 -300px;
}
.logo-chi {
background-position: 0 -350px;
}
.logo-cin {
background-position: 0 -400px;
}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="3" border="0" class="tablehead">
<tbody>
<tr>
<td align="right" colspan="11">NFL - Week 4</td>
</tr>
<tr class="evenrow">
<td>CAROLINA PANTHERS<br />CHICAGO BEARS</td>
<td><div class="logo-car logos"> </div></td>
<td><div class="logo-chi logos"> </div></td>
<td><div class="logo-equ logos"> </div></td>
<td><div class="logo-qes logos"> </div></td>
</tr>
<tr class="oddrow">
<td>BUFFALO BILLS<br />CINCINNATI BENGALS</td>
<td><div class="logo-buf logos"> </div></td>
<td><div class="logo-cin logos"> </div></td>
<td><div class="logo-equ logos"> </div></td>
<td><div class="logo-qes logos"> </div></td>
</tr>
<tr>
<td align="left" colspan="11">... and 14 rows more ...</td>
</tr>
</tbody>
</table>
<p>
<a href=“http://validator.w3.org/check?uri=referer”>
<img src=“http://www.w3.org/Icons/valid-xhtml10” alt=“Érvényes XHTML 1.0 Strict!” height=“31” width=“88” />
</a>
<a href=“http://jigsaw.w3.org/css-validator/check/referer”>
<img style=“border:0;width:88px;height:31px” src=“http://jigsaw.w3.org/css-validator/images/vcss” alt=“Érvényes CSS!” />
</a>
</p>
</body>
</html>
The base64 encode part was cutted.