Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript]Gwiazdki do oceniania
zavada
post
Post #1





Grupa: Zarejestrowani
Postów: 68
Pomógł: 6
Dołączył: 15.06.2009
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Witam!
Mam trzy pliki: star.png, star_grey.png i star_bronze.png
Chcę zrobić system oceniania. Z php i mysql nie mam problemu, ale jak zrobić najeżdżanie na gwiazdki? To znaczy średnia ocen to 3/5. Więc skrypt pisze kod:

[HTML] pobierz, plaintext 
  1. <img src="star_bronze.png">
  2. <img src="star_bronze.png">
  3. <img src="star_bronze.png">
  4. <img src="star_grey.png">
  5. <img src="star_grey.png">
[HTML] pobierz, plaintext


Ale jak zrobić to, że jak najadę na 2. gwiazdkę to wygląda tak:
[HTML] pobierz, plaintext 
  1. <img src="star_gold.png">
  2. <img src="star_gold.png">
  3. <img src="star_bronze.png">
  4. <img src="star_grey.png">
  5. <img src="star_grey.png">
[HTML] pobierz, plaintext


A jak najadę na 4. to wygląda tak:?
[HTML] pobierz, plaintext 
  1. <img src="star_gold.png">
  2. <img src="star_gold.png">
  3. <img src="star_gold.png">
  4. <img src="star_gold.png">
  5. <img src="star_grey.png">
[HTML] pobierz, plaintext


Wiem, wiem. Jest dużo takich tematów, ale w żadnym nie znalazłem tego, co chcę.
Go to the top of the page
+Quote Post
kefirek
post
Post #2





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

Ostrzeżenie: (0%)
-----

http://masugadesign.com/the-lab/scripts/un...tar-rating-bar/
Go to the top of the page
+Quote Post
zavada
post
Post #3





Grupa: Zarejestrowani
Postów: 68
Pomógł: 6
Dołączył: 15.06.2009
Skąd: Kraków

Ostrzeżenie: (0%)
-----

A coś prostszego (jakieś onmouseover i javascript) ?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
  2. <html>
  3. <head>
  4.   <meta content="text/html; charset=WINDOWS-1250" http-equiv="content-type">
  5.   <title>Gwiazdki</title>
  6.   <script type="text/javascript">
  7.   function Rate(type, starNumber) {
  8.     for (i = 1; i <= starNumber; i++) {
  9. 	  if (type == 'over') {
  10. 	    if (i <= rate) {
  11. 		  starId = document.getElementById ("star" + i);
  12. 	      starId.src = 'star.png';
  13. 		}
  14. 		else {
  15. 	      starId = document.getElementById ("star" + i);
  16. 	      starId.src = 'star.png';
  17. 		}
  18. 	  }
  19. 	  else if (type == 'out') {
  20. 	    if (i <= rate) {
  21. 		  starId = document.getElementById ("star" + i);
  22. 	      starId.src = 'star_bronze.png';
  23. 		}
  24. 		else {
  25. 	      starId = document.getElementById ("star" + i);
  26. 	      starId.src = 'star_grey.png';
  27. 		}  
  28. 	  }
  29. 	}
  30.   } 
  31.   </script>
  32. </head>
  33. <body>
  34. <script type="text/javascript">
  35. rate = 3;
  36. for (i = 1; i <= rate; i++) {
  37.   starId = document.getElementById ("star" + i);
  38.   starId.src = 'star_bronze.png';  
  39. }
  40. </script>
  41. <img src="star_grey.png" id="star1" onmouseover="Rate('over', 1)" onmouseout="Rate('out', 1)">
  42. <img src="star_grey.png" id="star2" onmouseover="Rate('over', 2)" onmouseout="Rate('out', 2)">
  43. <img src="star_grey.png" id="star3" onmouseover="Rate('over', 3)" onmouseout="Rate('out', 3)">
  44. <img src="star_grey.png" id="star4" onmouseover="Rate('over', 4)" onmouseout="Rate('out', 4)">
  45. <img src="star_grey.png" id="star5" onmouseover="Rate('over', 5)" onmouseout="Rate('out', 5)">
  46. </body>
  47. </html>
[HTML] pobierz, plaintext


Mam coś takiego. problem w tym, że jak urucchomie skrypt to musze najechać na gwiazdki, zeby zmieniły się na star_bronze.png
Jak zrobć, zeby bylo od razu
Go to the top of the page
+Quote Post
Pawel_W
post
Post #4





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

body onload?

EDIT: skrypt masz poprawny, jedyne co to tutaj jest błąd
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. rate = 3;
  3. for (i = 1; i <= rate; i++) {
  4. starId = document.getElementById ("star" + i);
  5. starId.src = 'star_bronze.png'; 
  6. }
  7. </script>
  8. <img src="star_grey.png" id="star1" onmouseover="Rate('over', 1)" onmouseout="Rate('out', 1)">
  9. <img src="star_grey.png" id="star2" onmouseover="Rate('over', 2)" onmouseout="Rate('out', 2)">
  10. <img src="star_grey.png" id="star3" onmouseover="Rate('over', 3)" onmouseout="Rate('out', 3)">
  11. <img src="star_grey.png" id="star4" onmouseover="Rate('over', 4)" onmouseout="Rate('out', 4)">
  12. <img src="star_grey.png" id="star5" onmouseover="Rate('over', 5)" onmouseout="Rate('out', 5)">
[HTML] pobierz, plaintext

pętla zmienia ci gwiazdki na brązowe, ale te obrazki nie istnieją, zamień to na:
[HTML] pobierz, plaintext 
  1. <img src="star_grey.png" id="star1" onmouseover="Rate('over', 1)" onmouseout="Rate('out', 1)">
  2. <img src="star_grey.png" id="star2" onmouseover="Rate('over', 2)" onmouseout="Rate('out', 2)">
  3. <img src="star_grey.png" id="star3" onmouseover="Rate('over', 3)" onmouseout="Rate('out', 3)">
  4. <img src="star_grey.png" id="star4" onmouseover="Rate('over', 4)" onmouseout="Rate('out', 4)">
  5. <img src="star_grey.png" id="star5" onmouseover="Rate('over', 5)" onmouseout="Rate('out', 5)">
  6. <script type="text/javascript">
  7. rate = 3;
  8. for (i = 1; i <= rate; i++) {
  9. starId = document.getElementById ("star" + i);
  10. starId.src = 'star_bronze.png'; 
  11. }
  12. </script>
[HTML] pobierz, plaintext


Ten post edytował Pawel_W 20.07.2009, 19:51:56
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 05:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn