Today I'm trying to improve on the look of the voting system.
I created new thumbs up/thumbs down that each comes in grey/green grey/red.
In CSS I defined that the thumbs up/down shown are both grey, and on hover with the mouse they turn green/red.
So now this works and it looks good and more responsive to the visitor.
Now, you can guess what I'm missing... I want that on click they would stay green/red and not back to grey
(at least while the user is still on the same page).
I thought one of the following might have helped by putting it in CSS after the :hover one:
#comment div.voting_yes:active {background: url(../images/thumbup_green.png) no-repeat;}
or-
#comment div.voting_yes:focus {background: url(../images/thumbup_green.png) no-repeat;}
or-
#comment div.voting_yes:visited {background: url(../images/thumbup_green.png) no-repeat;}
But I understand this doesn't suppose to work (maybe because there's no link really).
So do you know how I could achieve this?
Is it only through some javascript? Perhaps it is OnClick?
Saw this in JOSC_post.php:
public function voting_cell($mode, $num, $id) {
return "<li><div id='$mode$id' class='voting_$mode' onclick='JOSC_voting($id,\"$mode\"
'><span>$num</span></div></li>"; }I'm not really sure what to do with the OnClick or something else in order to display the green thumbup image also after someone had clicked the thumbup.
Any ideas?
Thanks!