tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
987
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Tomatenmark Tomatenmark ist offline Mitglied Bronze
    Registriert seit
    Aug 2008
    Beiträge
    35
    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:
    Code :
    1
    2
    3
    4
    5
    6
    7
    
     
    <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:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    
     
    <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
     

  2. #2
    Avatar von Napofis
    Napofis Napofis ist offline require 'brain.php';
    Registriert seit
    Jun 2007
    Ort
    Bayern
    Beiträge
    587
    ich würde das an deiner stelle mit css machen
    zb:

    a.stern:hover {
    ....
    }


    erspart dir den ganzen unnötigen javascript code
     

  3. #3
    Tomatenmark Tomatenmark ist offline Mitglied Bronze
    Registriert seit
    Aug 2008
    Beiträge
    35
    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
    Geändert von Tomatenmark (06.02.09 um 13:41 Uhr)
     

Ähnliche Themen

  1. mouseover
    Von dieKitty im Forum Flash Plattform
    Antworten: 11
    Letzter Beitrag: 23.01.08, 21:32
  2. MouseOver
    Von Patx3 im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 31.01.07, 14:54
  3. Mouseover für VB
    Von JoHaLu im Forum Visual Basic 6.0
    Antworten: 2
    Letzter Beitrag: 05.05.06, 21:13
  4. Mouseover
    Von bronckotronikz im Forum Javascript & Ajax
    Antworten: 11
    Letzter Beitrag: 07.01.04, 11:26
  5. Mouseover
    Von cardex im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 17.02.03, 18:05