Bewertung mit Grafiken

[prego]

Hi,

ich bastel gerade ein Bewertungsscript.

Es werden einfach 6 Grafiken geladen und beim drüber fahren wird bei allen von links bis zu dem wo ich drüber bin das Hintergrundbild entsprechend verschoben.

Ich habe die Anzahl der Punkte in das Alt-Attribut meines IMG-Tags geschrieben.

<img alt="0" src="/_images/shim.gif" height="15" width="16">
<img alt="1" src="/_images/shim.gif" height="15" width="16">
<img alt="2" src="/_images/shim.gif" height="15" width="16">
<img alt="3" src="/_images/shim.gif" height="15" width="16">
<img alt="4" src="/_images/shim.gif" height="15" width="16">
<img alt="5" src="/_images/shim.gif" height="15" width="16"> 

shim.gif ist ein Spacer-Gif, da die eigentliche Bewertungsgrafik ja über den Hintergrund geladen wird. Die Elemente werden dynamisch erzeugt. Beim erzeugen hänge ich jedem Element ein Event auf mousevoer an.
Hier mal die Funktionen:

var rateRange = 6;
var rateImg = '/_images/img_rating_star.gif';
var rateImgWidth = 16;
var rateImgHeight = 15;
var spacerImg = '/_images/shim.gif';

function initRating(){

    var rating = document.getElementById('rating');

    for(var i = 0; i < rateRange; i++){
        var img;
        img = document.createElement('img');
        img.src = spacerImg;
        img.width = rateImgWidth;
        img.height = rateImgHeight;

        img.alt = i;

        img.style.backgroundImage  = 'url(' + rateImg + ')';
        img.style.cursor = 'pointer';

        img.onmouseover = rate;

        rating.appendChild(img);
    }

}


function rate(){

    var val = this.alt;
    var rating = document.getElementById('rating').getElementsByTagName('img');

    resetRating();

    for(var i = 0; i <= val; i++){
        rating[i].style.backgroundPosition = rateImgWidth + 'px 0px';
    }

    window.status = val;
}


function resetRating(){
    var rating = document.getElementById('rating').getElementsByTagName('img');
    for(var i = 0; i < rating.length; i++){
        rating[i].style.backgroundPosition = '0px 0px';
    }
} 

Nun zu meinem Problem - ich kann leider meine "info" welcher Bewertungspunkt denn nun gerade überfahren wird nicht im Alt-Attribut speichern, weil der IE das wiedas Title-Attribut behandelt und beim überfahren somit die "gespeicherte" Zahl anzeigt.

Eine Idee war das ganze mit Span zu machen und den Inhalt vom Span unsichtbar zu machen und da die Information zu speichern.

Mir schwebt aber was anderes vor und da ist die Frage ob das funktioniert.

Kann ich irgendwie das Element das ich gerade durchlaufe mit "this" vergleichen und schauen das aktuelle Element das ist, was das Event ausgelöst hat?

if(this == rating[i]) 

macht ja wenig Sinn, oder?


Besten Dank schonmal, so long, pm

[wahsaga]

Re: Bewertung mit Grafiken

Warum willst du sowas mit Bildobjekten machen?

Ein "normales" Rating-System verlangt geradezu nach Radiobuttons. Deren Value kannst du auch problemlos jederzeit auslesen.

Und die Hintergrundgrafik kannst du ja dort (padding & overflow), oder bei deren Label anbringen.



http://www.pseliger.de/testCases/cus...iobuttons.html
http://www.chriserwin.com/scripts/crir/

[prego]

Hi,

danke schonmal für dein Tipps wahsaga. Natürlich hast du recht und das "richtige" Element dafür ist input type=radio.

Hab das auch mittlerweile so gemacht - vielleicht ein bischen umständlich, aber im Grunde funktionierts.

function initRating(){

    var rating = document.getElementById('rating');

    var form = document.createElement('form');

    for(var i = 0; i < rateRange; i++){
        var input;
        input = document.createElement('input');
        input.type = 'radio';
        input.name = 'rating';

        input.value = i;
        input.id = 'rating_' + i;
        input.style.display = 'none';

        input.onclick = doRate;

        form.appendChild(input);

        var label = document.createElement('label');
        label.innerHTML = '<span>' + (i+1) + ' Punkt(e)</span>';
        label.style.cursor = 'pointer';

        label.style.display = 'block';
        label.style.cssFloat = 'left';
        label.getElementsByTagName('span')[0].style.display = 'none';
        label.style.overflow = 'hidden';

        label.style.width = rateImgWidth + 'px';
        label.style.height = rateImgHeight + 'px';

        label.onmouseover = rate;

        label.htmlFor = input.id;

        label.style.backgroundImage  = 'url(' + rateImg + ')';

        form.appendChild(label);

    }

    rating.appendChild(form);

}

function rate(){

    var val = document.getElementById(this.htmlFor).value;
    var rating = this.parentNode.getElementsByTagName('label');

    resetRating(rating);

    for(var i = 0; i <= val; i++){
        rating[i].style.backgroundPosition = rateImgWidth + 'px 0px';
    }

    window.status = val;

}

function doRate(){
    alert(this.value);
}

function resetRating(rating){
    for(var i = 0; i < rating.length; i++){
        rating[i].style.backgroundPosition = '0px 0px';
    }
} 

Hatte anfangs gedacht, das ich beim Clicken den labels/onchange des Radio's einfach den onsubmit-Eventhander vom Form nehme und damit meine folgende abfackel, aber onsubmit wir ja nur ausgelöst, wenn man auf einen submit-Button klickt.

Wenn noch jemand Tipps hat, als her damit... danke aber schonmal.

[tontechniker]

Spontan fällt mit jQuery und das Plugin jQuery Star Rating Plugin (evtl. auch hier) dazu ein.

[prego]

Hey tontechniker,

cool - hab ich noch garnichts von gewusst. Da ich aber das Dingen jetzt schon fertig habe, werd ich denke ich das eigene nehmen

Aber fürs nächste mal schau ich mir das jQuery Plugin an.

thnx

[tontechniker]

Da ich aber das Dingen jetzt schon fertig habe, werd ich denke ich das eigene nehmen

Hab mir die letztens mal angeschaut und dachte deswegen dran - über jQuery hat man dort halt eine komplette Trennung zwischen HTML und Javascript (Rating auch ohne JS möglich).