Bewertungsstern Mouseover

[Tomatenmark]

Hallo Forum

Ich habe mit Hilfe von Javascript ein Mouseover bei Bewertungssternen, wie bei Youtube, gebastelt, jedoch funktioniert dieses leider nicht gewünscht.
Der optische Effekt mit dem Wechsel der Sterne beim Mouseover funktioniert wunderbar und schnell, jedoch wird bei aktiviertem Javascript der Link nicht bei Klick ausgeführt.
Ist Javascript deaktiviert funktioniert das Klicken wunderbar (nur das mouseover halt nicht - no na )

Habt ihr Ideen für einen Workaround oder hab ich einen Fehler eingebaut ?

Mein HTML Code:

<div id="gesamt_votes6" onmouseout="display_vote_stars('5', '0', 'gesamt_votes6', '6', '0')"><a href="?open=contest_photo&action=vote&voting=1&e_id=5" onmouseover="display_vote_stars('5
                            , '1', 'gesamt_votes6', '6')"><img src="design/images/star_inactive_big.jpg" border="0" alt="Votestern" /></a><a href="?open=contest_photo&action=vote&voting=2&e_id=5" onmouseover="display_vote_stars('5
                            , '2', 'gesamt_votes6', '6')"><img src="design/images/star_inactive_big.jpg" border="0" alt="Votestern" /></a><a href="?open=contest_photo&action=vote&voting=3&e_id=5" onmouseover="display_vote_stars('5
                            , '3', 'gesamt_votes6', '6')"><img src="design/images/star_inactive_big.jpg" border="0" alt="Votestern" /></a><a href="?open=contest_photo&action=vote&voting=4&e_id=5" onmouseover="display_vote_stars('5
                            , '4', 'gesamt_votes6', '6')"><img src="design/images/star_inactive_big.jpg" border="0" alt="Votestern" /></a><a href="?open=contest_photo&action=vote&voting=5&e_id=5" onmouseover="display_vote_stars('5
                            , '5', 'gesamt_votes6', '6')"><img src="design/images/star_inactive_big.jpg" border="0" alt="Votestern" /></a><br />Noch keine Bewertungen</div>

Der JS Code:

<script type="text/javascript">
<!--

 function display_vote_stars(e_id, voted, container, j, dbValue)
  {

     if(dbValue)
      {

         content = "<a href=\"?open=contest_photo&action=vote&voting=1&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '1', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=2&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '2', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=3&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '3', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=4&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '4', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=5&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '5', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a>";

      }
     else if(voted == 1)
      {

         content = "<a href=\"?open=contest_photo&action=vote&voting=1&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '1', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=2&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '2', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=3&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '3', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=4&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '4', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=5&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '5', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a>";

      }
     else if(voted == 2)
      {

         content = "<a href=\"?open=contest_photo&action=vote&voting=1&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '1', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=2&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '2', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=3&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '3', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=4&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '4', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=5&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '5', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a>";

      }
     else if(voted == 3)
      {

         content = "<a href=\"?open=contest_photo&action=vote&voting=1&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '1', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=2&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '2', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=3&e_id="+ e_id +"\" onmouseover=\"display_vote_stars('"+ e_id +"', '3', 'gesamt_votes"+ j +"', '"+ j +"')\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" /></a><a href=\"?open=contest_photo&action=vote&voting=4&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '4', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=5&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '5', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a>";

      }
     else if(voted == 4)
      {

         content = "<a href=\"?open=contest_photo&action=vote&voting=1&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '1', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=2&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '2', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=3&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '3', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=4&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '4', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=5&e_id="+ e_id +"\"><img src=\"design/images/star_inactive_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '5', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a>";

      }
     else
      {

         content = "<a href=\"?open=contest_photo&action=vote&voting=1&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '1', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=2&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '2', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=3&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '3', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=4&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '4', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a><a href=\"?open=contest_photo&action=vote&voting=5&e_id="+ e_id +"\"><img src=\"design/images/star_active_big.jpg\" border=\"0\" alt=\"Votestern\" onmouseover=\"display_vote_stars('"+ e_id +"', '5', 'gesamt_votes"+ j +"', '"+ j +"')\" /></a>";

      }


    if(dbValue)
     {
       if(dbValue > 0)
         state = dbValue;
       else
         state = "Noch keine Bewertungen";
     }
    else
     {

          switch(voted)
            {
              case "1": state = 'Sehr Schlecht'; break;
              case "2": state = 'Schlecht'; break;
              case "3": state = 'Mittelm&auml;&szlig;ig'; break;
              case "4": state = 'Gut'; break;
              case "5": state = 'Sehr Gut'; break;
            }
     
     }
    

     document.getElementById(container).innerHTML = content +'<br />'+ state;


  }


-->
</script>

Vielen dank im vorraus.

Grüße mark

 

[Napofis]

ich würde das an deiner stelle mit css machen
zb:

a.stern:hover {
....
}


erspart dir den ganzen unnötigen javascript code

 

[Tomatenmark]

Hallo

Danke für deine Antwort.
Diese Variante hab ich auch schon überdacht, allerdings möchte ich, dass beim mouseover über dem 3 stern, die ersten 3 sterne markiert werden, bei 4, die ersten 4, ...
Und bei einem Mouseover wäre es nur möglich einen stern zu ändern.



EDIT:
Hat niemand eine Idee. Es muss nicht genau so funktionieren - hätte einfach gerne, dass dieser Effekt da ist - wie ist mir egal
Vielleicht habt ihr JS Alternativen wie ich diesen Mouseover Effekt wie bei Youtube zusammenbringe