Javascript: onClick event requiring two clicks b/c of onMouseOver handler

Question

I have a Netflix/Amazon style star-rating system. Thus, the stars temporarily light up onMouseOver and a click is supposed to trigger a PHP call and a permanent change in star color.

Everything works, although the onClick event isn't triggered until the second click. It appears that this is because the onMouseOver event is still activated until it encounters a terminating action (onMouseOut or a click).

I've seen similar questions, but no on-point answers.

Thanks!

function rate(img_name,action,headlineid,userid,rating) {
        var baseurl='http://www.mysite.com/images/';
    var imgoff='atcstar3.gif';
        var imghover='atcstar.gif';
        var imgon='atcstar.gif';
    imgname=img_name;
        hid=headlineid;
var current=document.getElementById(img_name).src;
        var star=img_name.replace(hid+'-star','');


       switch (action) {
                case 'hover':
                                for (i=1;i<=star;i++) {
                                        document.getElementById(hid+'-star'+i).src=baseurl+imghover;
                               }
                        break;

                case 'click':
                        if (current!=baseurl+imgon) {
                                for (i=1;i<=star;i++) {
                                        document.getElementById(hid+'-star'+i).src=baseurl+imgon;
                                }

                                current=baseurl+imgon;

                                xmlHttp=GetXmlHttpObject()
                                if (xmlHttp==null)
                                 {
                                 alert ("Browser does not support HTTP Request")
                                 return
                                 }

                                if (getCookie("votes")=="") {
                                  setCookie("votes",hid+'-'+star,3);
                                } else {
                                        votes=getCookie("votes")
                                        votes=votes+","+hid+'-'+star
                                        setCookie("votes",votes,3);
                                }


                                var url="rate.php?";
                                url=url+"headlineid="+hid;
                                url=url+"&userid="+userid;
                                url=url+"&rating="+star;
                                url=url+"&sid="+Math.random();
                        xmlHttp.onreadystatechange=stateChangedRateStory;
                                xmlHttp.open("GET",url,true);
                                xmlHttp.send(null);
                      newrank=star;




                        } else {
                            document.getElementById(img_name).src=baseurl+imgoff;
                                current=baseurl+imgoff;
                        }
                        break;
                case 'out':

                        if (current!=baseurl+imgon || (newrank!=star && rating<star)) {
                              for (i=5;i>=rating+1;i--) {
                                        //document[hid+'-star'+i].src=baseurl+imgoff;
                                        document.getElementById(hid+'-star'+i).src=baseurl+imgoff;
                                }
                        }

                        break;
        }
}

Answer 1

try having the onMouseOver event return true.

Answer 2

Whenever I need the display to change on mouse over, I usually prefer using CSS element:hover instead.