JavaScript Bewertungsanzeige mit Sternchen

  • JavaScript Bewertungsanzeige mit Sternchen

    Hab mir ne kleine Bewertungsanzeige geschrieben, die die Werte aber nicht speichert ^^ Also einfach nur ein rein optisches Vergnügen ;)

    Dazu hab ich mir auch ne Testseite gemacht mit etwas längerem Scriptcode im Head. Spielt aber erstmal keine Rolle.

    Hier erstmal der Testcode meiner Anzeige:

    Quellcode

    1. <html>
    2. <head>
    4. <script language="JavaScript">
    5. <!-- vor alten Browsern verstecken
    7. var browserOK = false;
    9. // -->
    10. </script>
    12. <script language="JavaScript">
    13. <!-- vor alten Browsern verstecken
    15. // Anwender benutzt einen JS 1.1 Browser!
    16. browserOK = true;
    18. bild= new Array(); // Array fuer Bilder erzeugen
    20. //Hier werden die Bilder in den Speicher geladen:
    22. bild[2] = new Image();
    23. bild[2].src = "stern.gif";
    24. bild[1] = new Image();
    25. bild[1].src = "stern2.gif";
    27. // -->
    28. </script>
    32. <script language="JavaScript">
    33. <!-- vor alten Browsern verstecken
    35. var AnAus = false; // Zustand des Schalters am Anfang
    37. function schalten(imag) {
    38. if (browserOK) {
    39. switch (imag) {
    40. case "stern1":
    41. document.stern1.src = bild[1].src;
    42. document.stern2.src = bild[2].src;
    43. document.stern3.src = bild[2].src;
    44. document.stern4.src = bild[2].src;
    45. document.stern5.src = bild[2].src;
    46. break;
    47. case "stern2":
    48. document.stern1.src = bild[1].src;
    49. document.stern2.src = bild[1].src;
    50. document.stern3.src = bild[2].src;
    51. document.stern4.src = bild[2].src;
    52. document.stern5.src = bild[2].src;
    53. break;
    54. case "stern3":
    55. document.stern1.src = bild[1].src;
    56. document.stern2.src = bild[1].src;
    57. document.stern3.src = bild[1].src;
    58. document.stern4.src = bild[2].src;
    59. document.stern5.src = bild[2].src;
    60. break;
    61. case "stern4":
    62. document.stern1.src = bild[1].src;
    63. document.stern2.src = bild[1].src;
    64. document.stern3.src = bild[1].src;
    65. document.stern4.src = bild[1].src;
    66. document.stern5.src = bild[2].src;
    67. break;
    68. case "stern5":
    69. document.stern1.src = bild[1].src;
    70. document.stern2.src = bild[1].src;
    71. document.stern3.src = bild[1].src;
    72. document.stern4.src = bild[1].src;
    73. document.stern5.src = bild[1].src;
    74. break;
    75. }
    77. }
    78. }
    80. // -->
    81. </script>
    82. </head>
    83. <body bgcolor="#ffffff" text="#000000">
    84. <center>
    85. <a href="javascript:schalten('stern1');"><img name="stern1" src="stern.gif" border="0"></a>
    86. <a href="javascript:schalten('stern2');"><img name="stern2" src="stern.gif" border="0"></a>
    87. <a href="javascript:schalten('stern3');"><img name="stern3" src="stern.gif" border="0"></a>
    88. <a href="javascript:schalten('stern4');"><img name="stern4" src="stern.gif" border="0"></a>
    89. <a href="javascript:schalten('stern5');"><img name="stern5" src="stern.gif" border="0"></a>
    91. </center>
    92. </body>
    93. </html>
    Alles anzeigen


    Die Anzeige funktioniert super und auch so wie ich es wollte...

    Jetzt wollt ich die Anzeige unter meine Artikel packen.. Also aus Testzwecken erstmal den Javascriptcode in die Head kopiert und die "a href" Zeilen unter meine Artikelbilder... Die Anzeige der grauen Sterne (zum Verständniss: stern.gif = grauer Stern, stern2.gif = leuchtender Stern) ist zwar da, aber beim draufklicken passiert nichts...

    Hab mir erst gedacht das es an dem Pfad liegt, aber die grauen werden ja angezeigt.. Ich weiß da echt nicht mehr weiter.. Woran kanns noch liegen? Wenn ihr den anderen Quelltext auch noch braucht:

    Quellcode

    1. <html>
    2. <head>
    3. <title>Warenliste indischer Tees</title>
    4. <meta name="author" content="blubb">
    6. <link rel="stylesheet" type="text/css" href="../skripts/EinheitBody.css">
    7. <script type="text/javascript" src="../skripts/WarenEinkauf.js"></script>
    8. <script language="JavaScript">
    9. <!-- vor alten Browsern verstecken
    11. var browserOK = false;
    13. // -->
    14. </script>
    16. <script language="JavaScript">
    17. <!-- vor alten Browsern verstecken
    19. // Anwender benutzt einen JS 1.1 Browser!
    20. browserOK = true;
    22. bild= new Array(); // Array fuer Bilder erzeugen
    24. //Hier werden die Bilder in den Speicher geladen:
    26. bild[2] = new Image();
    27. bild[2].src = "../skripts/stern.gif";
    28. bild[1] = new Image();
    29. bild[1].src = "../skripts/stern2.gif";
    31. // -->
    32. </script>
    35. <script language="JavaScript">
    36. <!-- vor alten Browsern verstecken
    38. var AnAus = false; // Zustand des Schalters am Anfang
    40. function schalten(imag) {
    41. if (browserOK) {
    42. switch (imag) {
    43. case "stern1":
    44. document.stern1.src = bild[1].src;
    45. document.stern2.src = bild[2].src;
    46. document.stern3.src = bild[2].src;
    47. document.stern4.src = bild[2].src;
    48. document.stern5.src = bild[2].src;
    49. break;
    50. case "stern2":
    51. document.stern1.src = bild[1].src;
    52. document.stern2.src = bild[1].src;
    53. document.stern3.src = bild[2].src;
    54. document.stern4.src = bild[2].src;
    55. document.stern5.src = bild[2].src;
    56. break;
    57. case "stern3":
    58. document.stern1.src = bild[1].src;
    59. document.stern2.src = bild[1].src;
    60. document.stern3.src = bild[1].src;
    61. document.stern4.src = bild[2].src;
    62. document.stern5.src = bild[2].src;
    63. break;
    64. case "stern4":
    65. document.stern1.src = bild[1].src;
    66. document.stern2.src = bild[1].src;
    67. document.stern3.src = bild[1].src;
    68. document.stern4.src = bild[1].src;
    69. document.stern5.src = bild[2].src;
    70. break;
    71. case "stern5":
    72. document.stern1.src = bild[1].src;
    73. document.stern2.src = bild[1].src;
    74. document.stern3.src = bild[1].src;
    75. document.stern4.src = bild[1].src;
    76. document.stern5.src = bild[1].src;
    77. break;
    78. }
    80. }
    81. }
    83. // -->
    84. </script>
    86. </head>
    88. <body text="#000000" bgcolor="#E8FFDD" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    96. <table border=0 cellspacing=0 cellpadding=2>
    97. <H3>Auswahl von indischen Tees</H3>
    98. <br>
    99. <br>
    101. <tr>
    102. <td>
    103. <IMG SRC="../gesBilder/artikel/Darjeel1.jpg" width="150" BORDER="1" ALT="Darjeeling">
    104. </td>
    106. <td width="380">
    107. Artikelnr: 4
    108. <br>
    109. <b>Namring Upper T.G.F.O.P.1</b>
    110. <br>
    111. <a href="javascript:schalten('stern1');"><img name="stern1" src="../skripts/stern.gif" border="0"></a>
    112. <a href="javascript:schalten('stern2');"><img name="stern2" src="../skripts/stern.gif" border="0"></a>
    113. <a href="javascript:schalten('stern3');"><img name="stern3" src="../skripts/stern.gif" border="0"></a>
    114. <a href="javascript:schalten('stern4');"><img name="stern4" src="../skripts/stern.gif" border="0"></a>
    115. <a href="javascript:schalten('stern5');"><img name="stern5" src="../skripts/stern.gif" border="0"></a>
    116. <br><br>
    117. Dieser qualitativ hochwertige First flush Darjeeling besticht
    118. durch sein frisches, blumiges Aroma und durch seinen spritzigen s&uuml;sslichen Geschmack.
    122. </td>
    123. <td>
    124. <FORM>
    125. Menge Anzahl
    126. <br>
    127. <SELECT NAME="Selected">
    128. <OPTION>Bitte w&auml;hlen</OPTION>
    129. <OPTION VALUE="50"> 100 Gramm 7.99 &euro;</OPTION>
    130. <OPTION VALUE="100">250 Gramm 16.99 &euro;</OPTION>
    131. <OPTION VALUE="250">500 Gramm 31.99 &euro;</OPTION>
    132. </SELECT>
    133. <INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
    135. <INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(4,this.form.Selected.selectedIndex,Anzahl.value)">
    138. </FORM>
    139. </td>
    141. </tr>
    143. <tr><td><td><td></td></td></td></tr>
    144. <tr><td><td><td></td></td></td></tr>
    146. <tr>
    147. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    148. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    149. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    150. </tr>
    152. <tr><td><td><td></td></td></td></tr>
    153. <tr><td><td><td></td></td></td></tr>
    155. <tr>
    156. <td>
    157. <IMG SRC="../gesBilder/artikel/Darjeel2.jpg" width="150" BORDER="1" ALT="Gunpowder">
    158. </td>
    160. <td width="380">
    162. Artikelnr: 5
    163. <br>
    164. <b>Nagri Farm T.G.F.O.P.1</b>
    165. <br>
    166. <a href="javascript:schalten('stern1');"><img name="stern1" src="../skripts/stern.gif" border="0"></a>
    167. <a href="javascript:schalten('stern2');"><img name="stern2" src="../skripts/stern.gif" border="0"></a>
    168. <a href="javascript:schalten('stern3');"><img name="stern3" src="../skripts/stern.gif" border="0"></a>
    169. <a href="javascript:schalten('stern4');"><img name="stern4" src="../skripts/stern.gif" border="0"></a>
    170. <a href="javascript:schalten('stern5');"><img name="stern5" src="../skripts/stern.gif" border="0"></a>
    171. <br><br>
    172. Ein angenehm aromatischer Darjeeling mit mildem blumigem Geschmack.
    173. </td>
    174. <td>
    175. <FORM>
    176. Menge Anzahl
    177. <br>
    178. <SELECT NAME="Selected">
    179. <OPTION>Bitte w&auml;hlen</OPTION>
    180. <OPTION VALUE="50"> 100 Gramm 5.99 &euro;</OPTION>
    181. <OPTION VALUE="100">250 Gramm 12.99 &euro;</OPTION>
    182. <OPTION VALUE="250">500 Gramm 21.99 &euro;</OPTION>
    183. </SELECT>
    184. <INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
    186. <INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(5,this.form.Selected.selectedIndex,Anzahl.value)">
    189. </FORM>
    190. </td>
    191. </tr>
    192. <tr><td><td><td></td></td></td></tr>
    193. <tr><td><td><td></td></td></td></tr>
    194. <tr>
    195. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    196. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    197. <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
    198. </tr>
    200. <tr><td><td><td></td></td></td></tr>
    201. <tr><td><td><td></td></td></td></tr>
    202. <tr>
    203. <td>
    206. <IMG SRC="../gesBilder/artikel/Darjeel3.jpg" width="150" BORDER="1" ALT="Golden Nepal">
    207. </td>
    209. <td width="380">
    211. Artikelnr: 6
    212. <br>
    213. <b>Golden Nepal</b>
    214. <br>
    215. <a href="javascript:schalten('stern1');"><img name="stern1" src="../skripts/stern.gif" border="0"></a>
    216. <a href="javascript:schalten('stern2');"><img name="stern2" src="../skripts/stern.gif" border="0"></a>
    217. <a href="javascript:schalten('stern3');"><img name="stern3" src="../skripts/stern.gif" border="0"></a>
    218. <a href="javascript:schalten('stern4');"><img name="stern4" src="../skripts/stern.gif" border="0"></a>
    219. <a href="javascript:schalten('stern5');"><img name="stern5" src="../skripts/stern.gif" border="0"></a>
    220. <br><br>
    221. Das Aroma ist feinw&uuml;rzig, nuancenreich, kr&auml;ftig und leicht nussig.
    222. </td>
    223. <td>
    224. <FORM>
    225. Menge Anzahl
    226. <br>
    227. <SELECT NAME="Selected">
    228. <OPTION>Bitte w&auml;hlen</OPTION>
    229. <OPTION VALUE="50"> 100 Gramm 4.20 &euro;</OPTION>
    230. <OPTION VALUE="100">250 Gramm 10.39 &euro;</OPTION>
    231. <OPTION VALUE="250">500 Gramm 17.99 &euro;</OPTION>
    232. </SELECT>
    233. <INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
    235. <INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(6,this.form.Selected.selectedIndex,Anzahl.value)">
    238. </FORM>
    239. </td>
    240. </tr>
    242. </table>
    247. <a href="kasse.html">ab zur Kasse</a><br>
    249. </body>
    250. </html>
    Alles anzeigen


    Der obige Quelltext stellt das dar was Sache ist... Unter der Artikelbeschreibung soll die kleine Sternanzeige. Die Anzeige ist auch da, aber beim klicken, wie schon gesagt, passiert nichts :(

    Würde mich über Hilfe freuen, weil ich nach einigen Stunden irgendwie schon am Verzweifeln bin *lach* ^^

    //edit2
    Ok hab den Fehler jetzt doch selbst gefunden aber kann ihn nicht beheben... Oder ich kapier den Sinn nicht ^^ Wenn ich mehr als einen Votebalken in der HTML Seite habe, wechseln die Sterne beim klicken nicht mehr, bei einem schon ^^

    //edit3
    OMG.. ich habs geschafft :) Fehler gefunden und ausgemerzt. Trotz danke für die leute die ins Topic schauten und sich vielleicht schonmal Gedanken gemacht hatten :)

    MfG

    Euer One ^^
    Bilder

    • stern2.gif

      206 Byte, 11×12, 915 mal angesehen

    • stern.gif

      144 Byte, 11×12, 879 mal angesehen

  • Wenn du den Sterneblock mehrmals einsetzt, dann verwendest du auch die Namen (stern1, stern2, stern3...) mehrmals. Woher soll das Script denn wissen, welches Element es verändern soll

    Ich habe mal auf die Schnelle einen Wiki Beitrag zu einer Sternreihe erstellt: [coderwiki]HowTos/JavaScript-Sterne[/coderwiki]

    @edit: Poste doch bitte noch deine Änderungen, damit auch andere davon profitieren können

  • Die ausgelagerte JS-Datei sieht wie folgt aus:

    Quellcode

    1. var browserOK = false;
    3. // Anwender benutzt einen JS 1.1 Browser!
    4. browserOK = true;
    7. bild= new Array(); // Array fuer Bilder erzeugen
    9. //Hier werden die Bilder in den Speicher geladen:
    10. bild[2] = new Image();
    11. bild[2].src = "stern.gif";
    12. bild[1] = new Image();
    13. bild[1].src = "stern2.gif";
    16. var AnAus = false; // Zustand des Schalters am Anfang
    18. function schalten(imag) {
    19. if (browserOK) {
    20. switch (imag) {
    21. case "stern1":
    22. document.stern1.src = bild[1].src;
    23. document.stern2.src = bild[2].src;
    24. document.stern3.src = bild[2].src;
    25. document.stern4.src = bild[2].src;
    26. document.stern5.src = bild[2].src;
    27. break;
    28. case "stern2":
    29. document.stern1.src = bild[1].src;
    30. document.stern2.src = bild[1].src;
    31. document.stern3.src = bild[2].src;
    32. document.stern4.src = bild[2].src;
    33. document.stern5.src = bild[2].src;
    34. break;
    35. case "stern3":
    36. document.stern1.src = bild[1].src;
    37. document.stern2.src = bild[1].src;
    38. document.stern3.src = bild[1].src;
    39. document.stern4.src = bild[2].src;
    40. document.stern5.src = bild[2].src;
    41. break;
    42. case "stern4":
    43. document.stern1.src = bild[1].src;
    44. document.stern2.src = bild[1].src;
    45. document.stern3.src = bild[1].src;
    46. document.stern4.src = bild[1].src;
    47. document.stern5.src = bild[2].src;
    48. break;
    49. case "stern5":
    50. document.stern1.src = bild[1].src;
    51. document.stern2.src = bild[1].src;
    52. document.stern3.src = bild[1].src;
    53. document.stern4.src = bild[1].src;
    54. document.stern5.src = bild[1].src;
    55. break;
    56. case "stern6":
    57. document.stern6.src = bild[1].src;
    58. document.stern7.src = bild[2].src;
    59. document.stern8.src = bild[2].src;
    60. document.stern9.src = bild[2].src;
    61. document.stern10.src = bild[2].src;
    62. break;
    63. case "stern7":
    64. document.stern6.src = bild[1].src;
    65. document.stern7.src = bild[1].src;
    66. document.stern8.src = bild[2].src;
    67. document.stern9.src = bild[2].src;
    68. document.stern10.src = bild[2].src;
    69. break;
    70. case "stern8":
    71. document.stern6.src = bild[1].src;
    72. document.stern7.src = bild[1].src;
    73. document.stern8.src = bild[1].src;
    74. document.stern9.src = bild[2].src;
    75. document.stern10.src = bild[2].src;
    76. break;
    77. case "stern9":
    78. document.stern6.src = bild[1].src;
    79. document.stern7.src = bild[1].src;
    80. document.stern8.src = bild[1].src;
    81. document.stern9.src = bild[1].src;
    82. document.stern10.src = bild[2].src;
    83. break;
    84. case "stern10":
    85. document.stern6.src = bild[1].src;
    86. document.stern7.src = bild[1].src;
    87. document.stern8.src = bild[1].src;
    88. document.stern9.src = bild[1].src;
    89. document.stern10.src = bild[1].src;
    90. break;
    91. case "stern11":
    92. document.stern11.src = bild[1].src;
    93. document.stern12.src = bild[2].src;
    94. document.stern13.src = bild[2].src;
    95. document.stern14.src = bild[2].src;
    96. document.stern15.src = bild[2].src;
    97. break;
    98. case "stern12":
    99. document.stern11.src = bild[1].src;
    100. document.stern12.src = bild[1].src;
    101. document.stern13.src = bild[2].src;
    102. document.stern14.src = bild[2].src;
    103. document.stern15.src = bild[2].src;
    104. break;
    105. case "stern13":
    106. document.stern11.src = bild[1].src;
    107. document.stern12.src = bild[1].src;
    108. document.stern13.src = bild[1].src;
    109. document.stern14.src = bild[2].src;
    110. document.stern15.src = bild[2].src;
    111. break;
    112. case "stern14":
    113. document.stern11.src = bild[1].src;
    114. document.stern12.src = bild[1].src;
    115. document.stern13.src = bild[1].src;
    116. document.stern14.src = bild[1].src;
    117. document.stern15.src = bild[2].src;
    118. break;
    119. case "stern15":
    120. document.stern11.src = bild[1].src;
    121. document.stern12.src = bild[1].src;
    122. document.stern13.src = bild[1].src;
    123. document.stern14.src = bild[1].src;
    124. document.stern15.src = bild[1].src;
    125. break;
    126. }
    128. }
    130. }
    Alles anzeigen


    Die HTML Blöcke für die Sterne sehen wie folgt aus:

    Quellcode

    1. <a href="javascript:schalten('stern1');"><img name="stern1" src="stern.gif" border="0"></a>
    2. <a href="javascript:schalten('stern2');"><img name="stern2" src="stern.gif" border="0"></a>
    3. <a href="javascript:schalten('stern3');"><img name="stern3" src="stern.gif" border="0"></a>
    4. <a href="javascript:schalten('stern4');"><img name="stern4" src="stern.gif" border="0"></a>
    5. <a href="javascript:schalten('stern5');"><img name="stern5" src="stern.gif" border="0"></a>
    6. <br>
    7. <a href="javascript:schalten('stern6');"><img name="stern6" src="stern.gif" border="0"></a>
    8. <a href="javascript:schalten('stern7');"><img name="stern7" src="stern.gif" border="0"></a>
    9. <a href="javascript:schalten('stern8');"><img name="stern8" src="stern.gif" border="0"></a>
    10. <a href="javascript:schalten('stern9');"><img name="stern9" src="stern.gif" border="0"></a>
    11. <a href="javascript:schalten('stern10');"><img name="stern10" src="stern.gif" border="0"></a>
    12. <br>
    13. <a href="javascript:schalten('stern11');"><img name="stern11" src="stern.gif" border="0"></a>
    14. <a href="javascript:schalten('stern12');"><img name="stern12" src="stern.gif" border="0"></a>
    15. <a href="javascript:schalten('stern13');"><img name="stern13" src="stern.gif" border="0"></a>
    16. <a href="javascript:schalten('stern14');"><img name="stern14" src="stern.gif" border="0"></a>
    17. <a href="javascript:schalten('stern15');"><img name="stern15" src="stern.gif" border="0"></a>
    Alles anzeigen