Avatar billede Slettet bruger
26. oktober 2007 - 10:03 Der 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:

<img src="gfx/star_full.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_half.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">

Problemet er jo at ved mouseover skifter scriptet til en tom stjerne:
    if (data==0) {
    document.getElementById('rate1').src='gfx/star_empty.gif';


Kan man ikke ordne det sådan at den skifter til billedets oprindelige src i stedet?
Avatar billede 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"
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 11:49 #2
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 :)
Avatar billede 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....
Avatar billede w13 Novice
26. oktober 2007 - 15:26 #4
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>

<img alt="1" id="star1_7910" src="gfx/star_empty.gif" onmouseover="colorStar(this,7910);">
<img alt="2" id="star2_7910" src="gfx/star_empty.gif" onmouseover="colorStar(this,7910);">
<img alt="3" id="star3_7910" src="gfx/star_empty.gif" onmouseover="colorStar(this,7910);">
<img alt="4" id="star4_7910" src="gfx/star_empty.gif" onmouseover="colorStar(this,7910);">
<img alt="5" id="star5_7910" src="gfx/star_empty.gif" onmouseover="colorStar(this,7910);">

<br>

<img alt="1" id="star1_7911" src="gfx/star_empty.gif" onmouseover="colorStar(this,7911);">
<img alt="2" id="star2_7911" src="gfx/star_empty.gif" onmouseover="colorStar(this,7911);">
<img alt="3" id="star3_7911" src="gfx/star_empty.gif" onmouseover="colorStar(this,7911);">
<img alt="4" id="star4_7911" src="gfx/star_empty.gif" onmouseover="colorStar(this,7911);">
<img alt="5" id="star5_7911" src="gfx/star_empty.gif" onmouseover="colorStar(this,7911);">

</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.
Avatar billede w13 Novice
26. oktober 2007 - 15:26 #5
Og et svar, hvis du kan bruge det. =)
Avatar billede w13 Novice
26. oktober 2007 - 15:28 #6
Udover at scriptet er kortere, er forskellen på mit og dit vist bare, at der ikke bruges nogen onmouseout i mit.
Avatar billede w13 Novice
26. oktober 2007 - 15:29 #7
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>
Avatar billede 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 :-)
Avatar billede w13 Novice
27. oktober 2007 - 12:46 #9
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>

<span id="rating_7910" alt="2" style="display:none"></span>
<img alt="1" id="star1_7910" src="images/star_yellow.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7910)" onmouseout="colorStar(document.getElementById('rating_7910'),7910)">
<img alt="2" id="star2_7910" src="images/star_yellow.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7910)" onmouseout="colorStar(document.getElementById('rating_7910'),7910)">
<img alt="3" id="star3_7910" src="images/star_grey.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7910)" onmouseout="colorStar(document.getElementById('rating_7910'),7910)">
<img alt="4" id="star4_7910" src="images/star_grey.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7910)" onmouseout="colorStar(document.getElementById('rating_7910'),7910)">
<img alt="5" id="star5_7910" src="images/star_grey.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7910)" onmouseout="colorStar(document.getElementById('rating_7910'),7910)">

<br>

<span id="rating_7911" alt="3" style="display:none"></span>
<img alt="1" id="star1_7911" src="images/star_yellow.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7911)" onmouseout="colorStar(document.getElementById('rating_7911'),7911)">
<img alt="2" id="star2_7911" src="images/star_yellow.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7911)" onmouseout="colorStar(document.getElementById('rating_7911'),7911)">
<img alt="3" id="star3_7911" src="images/star_yellow.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7911)" onmouseout="colorStar(document.getElementById('rating_7911'),7911)">
<img alt="4" id="star4_7911" src="images/star_grey.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7911)" onmouseout="colorStar(document.getElementById('rating_7911'),7911)">
<img alt="5" id="star5_7911" src="images/star_grey.gif" onclick="window.location.href='noget.html'" onmouseover="colorStar(this,7911)" onmouseout="colorStar(document.getElementById('rating_7911'),7911)">

</body>
</html>
Avatar billede w13 Novice
27. oktober 2007 - 12:47 #10
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.
Avatar billede w13 Novice
27. oktober 2007 - 12:48 #11
Nu glemte jeg så også lige at rette billederne. star_yellow svarer til star_full og grey svarer til empty.
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester