✔ Rating im Formular ohne Radiobuttons

H

howlett

Grünschnabel
Hallo,

ich suche ein Java- oder DHTML-Script.

Ich möchte ein Formular entwerfen, welches den Mitgliedern die Möglichkeit gibt Ratings abzugeben. Beispielsweise ein Rating von 1 bis 6. Dies soll durch Sterne angezeigt werden.

Klickt jemand auf den vierten Stern sollen die ersten vier farblich hervorgehoben werden (die letzten 2 bleiben grau) und auch so stehen bleiben. Wird Stern Nr. 2 angeklickt, sollen die ersten 2 Sterne aktiviert sein.

Von dieser Bewertungsform müssen mehrere auf einer Seite angegeben werden. Das ganze soll dann noch als Formualar abschickbar sein.

Das ganze könnte man auch als Schieberegler sehen, nur dass man nicht den Regler mit der Maus packt und hin- und her schiebt, sondern lediglich auf einen der Sterne klickt.

Jemand ne Idee? Danke!
 
Hi,

anbei mal eine Möglichkeit, die mit Hintergrundfarben arbeitet (Du kannst natürlich auch Bilder verwenden). Um das ganze in einem Formular zu verwenden, kannst Du statt einem Textfeld ein hidden-Input verwenden.
HTML: 
<script language="JavaScript" type="text/JavaScript">
var colors = new Array(6);
colors[0] = "#FF0000";
colors[1] = "#CC3300";
colors[2] = "#996600";
colors[3] = "#669900";
colors[4] = "#33CC00";
colors[5] = "#00FF00";

function initBar(amt) {
    for (var i=0; i<6; i++) {
        if (i < amt) {
            document.getElementById("pad" + i).style.backgroundColor = colors[i];
        } else {
            document.getElementById("pad" + i).style.backgroundColor = "#CCCCCC";
        }
    }
    document.getElementById("rating").value = amt;
}
</script>
</head>

<body onLoad="initBar(0)">
<div id="pad0" style="position:absolute; width:20px; height:20px; z-index:1; left: 50px; top: 50px; background-color: #FF0000; border: 1px none #000000;" onClick="initBar(1)"></div>
<div id="pad1" style="position:absolute; width:20px; height:20px; z-index:1; left: 80px; top: 50px; background-color: #CC3300; border: 1px none #000000;" onClick="initBar(2)"></div>
<div id="pad2" style="position:absolute; width:20px; height:20px; z-index:1; left: 110px; top: 50px; background-color: #996600; border: 1px none #000000;" onClick="initBar(3)"></div>
<div id="pad3" style="position:absolute; width:20px; height:20px; z-index:1; left: 140px; top: 50px; background-color: #669900; border: 1px none #000000;" onClick="initBar(4)"></div>
<div id="pad4" style="position:absolute; width:20px; height:20px; z-index:1; left: 170px; top: 50px; background-color: #33CC00; border: 1px none #000000;" onClick="initBar(5)"></div>
<div id="pad5" style="position:absolute; width:20px; height:20px; z-index:1; left: 200px; top: 50px; background-color: #00FF00; border: 1px none #000000;" onClick="initBar(6)"></div>
<input  type="text" name="rating" id="rating">
</body>
 
ich habs mal ausprobiert, sieht exakt so aus, wie ich es brauche. muss jetzt nur das mal auf mehrfachverträglichkeit prüfen.

vielen dank!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück