Hi!
Here is the test page.
It works fine in Firefox and Google Chrome but not in Opera and Internet Explorer.

If you don't have Firefox or Google Chrome, I can tell you how it should be:
when you click an element, if should be lighter green, rolling out of a clicked element, it should be darker green. The same happens with elements that are not selected, ubt they are gray. But in IE and Opera, when you roll out of a selected element, it is gray.
I can't debug it in Opera because I have no debugger there, like Firebug.
I don't need to post any code because you can look at the cource code.

Please help me, thanks!

Fixed it!
Firefox converts "#afa" to "rgb(170, 255, 170)", IE does nothing with it, etc

Congrats.

Here's a way of doing it by setting a custom attribute, selected, which gives us something reliable to test. Color changes are effected by switching class names.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="http://3rlend.com/pjatt/pjattstyle.css" rel="StyleSheet">
<style type="text/css">
* {
	font-family:sans-serif;
}
body {
	background-color:#aaf;
	margin-top:1px;
}
td {
	border:#aaa solid 2px;
}
.userButton {
	background-color:#aaa;
	width:475px;
	padding:4px;
}
.hover {
	background-color:#bbb;
}
.selected {
	background-color:#9e9;
}
.selectedHover {
	background-color:#afa;
}
</style>
</head>
<body>
<script type ="text/javascript">
var ub = 'userButton';
function rollOver_user(user_span){
	user_span.className = (user_span.selected) ? ub + ' selectedHover' : ub + ' hover';
}
function rollOut_user(user_span){
	user_span.className = (user_span.selected) ? ub + ' selected' : ub;
}
function click_user(user_span){
	user_span.selected = (!user_span.selected) ? true : false;
	user_span.className = user_span.selected ? ub + ' selectedHover' : ub + ' hover';
}
</script>

<table>
<tr><td id="user_1" onclick="click_user(this)" onmouseout="rollOut_user(this)" onmouseover="rollOver_user(this)" class="userButton">#1</td></tr>
<tr><td id="user_2" onclick="click_user(this)" onmouseout="rollOut_user(this)" onmouseover="rollOver_user(this)" class="userButton">#2</td></tr>
</table>

</body>
</html>

I'm sure that with a little more thought it could be even simpler.

Airshow

That's what I had in mind when I said "even simpler".

I tried it and couldn't make it work but maybe someone knows how.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.