26. oktober 2007 - 10:03Der er
9 kommentarer og 2 løsninger
Skift billede (mouse over)
Hej,
Jeg har kig på et ratingsystem:
<script type="text/javascript"> function changerating(data) { if (data==0) { document.getElementById('rate1').src='gfx/star_empty.gif'; document.getElementById('rate2').src='gfx/star_empty.gif'; document.getElementById('rate3').src='gfx/star_empty.gif'; document.getElementById('rate4').src='gfx/star_empty.gif'; document.getElementById('rate5').src='gfx/star_empty.gif'; } else if (data==1) { document.getElementById('rate1').src='gfx/star_full.gif'; } else if (data==2) { document.getElementById('rate1').src='gfx/star_full.gif'; document.getElementById('rate2').src='gfx/star_full.gif'; } else if (data==3) { document.getElementById('rate1').src='gfx/star_full.gif'; document.getElementById('rate2').src='gfx/star_full.gif'; document.getElementById('rate3').src='gfx/star_full.gif'; } else if (data==4) { document.getElementById('rate1').src='gfx/star_full.gif'; document.getElementById('rate2').src='gfx/star_full.gif'; document.getElementById('rate3').src='gfx/star_full.gif'; document.getElementById('rate4').src='gfx/star_full.gif'; } else if (data==5) { document.getElementById('rate1').src='gfx/star_full.gif'; document.getElementById('rate2').src='gfx/star_full.gif'; document.getElementById('rate3').src='gfx/star_full.gif'; document.getElementById('rate4').src='gfx/star_full.gif'; document.getElementById('rate5').src='gfx/star_full.gif'; } } </script> <img src="gfx/star_empty.gif" id="rate1" onmouseover="changerating(1);" onmouseout="changerating(0);" style="cursor:pointer;" onclick="document.location.href='noget.html';" alt="Giv dette produkt 1 stemme"> <img src="gfx/star_empty.gif" id="rate2" onmouseover="changerating(2);" onmouseout="changerating(0);" style="cursor:pointer;" onclick="document.location.href='noget.html';" alt="Giv dette produkt 2 stemmer"> <img src="gfx/star_empty.gif" id="rate3" onmouseover="changerating(3);" onmouseout="changerating(0);" style="cursor:pointer;" onclick="document.location.href='noget.html';" alt="Giv dette produkt 3 stemmer"> <img src="gfx/star_empty.gif" id="rate4" onmouseover="changerating(4);" onmouseout="changerating(0);" style="cursor:pointer;" onclick="document.location.href='noget.html';" alt="Giv dette produkt 4 stemmer"> <img src="gfx/star_empty.gif" id="rate5" onmouseover="changerating(5);" onmouseout="changerating(0);" style="cursor:pointer;" onclick="document.location.href='noget.html';" alt="Giv dette produkt 5 stemmer">
Det virker fint nok - mit spørgsmål er flg.: Hvad gør man, hvis man ikke starter med 5 TOMME stjerner? Hvis nu objektet allerede HAR en rating f.eks. på 1,5 - så kunne billeder se sådan ud:
I dette særtema om aspekter af AI ser vi på skiftet fra sprogmodeller til AI-agenter, og hvordan virksomheder kan navigere i spændet mellem teknologisk hastighed og behovet for menneskelig kontrol.
Slettet bruger
26. oktober 2007 - 10:04#1
Æj, der skulle selvf. stå: "Problemet er jo at ved MOUSE-OUT(!) skifter scriptet til en tom stjerne"
Jeg ved at W13 har lavet et simpelt ratingsystem med stjerner, men jeg ved ikke hvordan det virker når der allerede er givet en rating. Han læser nok denne tråd :)
Synes godt om
Slettet bruger
26. oktober 2007 - 14:29#3
Hmm ja - nogle gange hjælper det at tænke sig lidt om... Det kan gøres ved at gemme den oprindelige rating som baggrundsbillede i eks. et <td>-tag. Den hele stjerne er stadig en hel stjerne, mens den tomme sættes til at være en trans (tom) gif....
Jep, jeg har lavet en lidt mindre kode, som gerne skulle gøre det samme. Tag et kig på den: -------------------------------------------------------- <html> <head> <script type="text/javascript"> function colorStar(img,id) { img=img.getAttribute("alt"); var i=1; while(i<=5){ document.getElementById("star"+i+"_"+id).setAttribute("src",i<=img?"gfx/star_full.gif":"gfx/star_empty.gif"); i++; } } </script> </head> <body>
</body> </html> ------------------------------------------------------------ 7910 og 7911 repræsenterer "ratinggruppens" id, fordi jeg lavede koden til en, der havde en masse film med forskellige id's, som skulle vises på samme side, hvor man kunne rate dem.
Scriptet ku' lige blive lidt kortere: ------------------------------------- <script type="text/javascript"> function colorStar(img,id) { img=img.getAttribute("alt"); for(i=1;i<=5;i++){ document.getElementById("star"+i+"_"+id).setAttribute("src",i<=img?"gfx/star_full.gif":"gfx/star_empty.gif"); } } </script>
Synes godt om
Slettet bruger
27. oktober 2007 - 12:07#8
"Problemet" med dit script bliver selvf. (pga. manglende mouseout) at hvis brugeren ikke trykker for at reg. sin rate - så er stjernerne markeret alligevel... men det er en bagatel :-) Du skal ha' tak for dit input - og selvom jeg beholder mit oprindelige script får du point - det skal jo nødigt hedde sig :-)
Jamen så har du jo ikke fået løst noget. =) Min nedenstående kode, gør vist det, du ønsker: ----------------------------------------------------- <html> <head> <script type="text/javascript"> function colorStar(img,id) { img=img.getAttribute("alt"); for(i=1;i<=5;i++){ document.getElementById("star"+i+"_"+id).setAttribute("src",i<=img?"images/star_yellow.gif":"images/star_grey.gif"); } } </script> </head> <body>
Grunden til at der ikke var nogen mouseout eller click på ratingerne var, at det i mit system automatisk blev opdateret med Ajax. Og så glemte jeg lige at rette det til her.
Nu glemte jeg så også lige at rette billederne. star_yellow svarer til star_full og grey svarer til empty.
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.