CSS und Javascript - bewertung mit Sternen

[Happynils]

Zuerstmal, ich kann überhaupt kein Javascript.
eigentlich sollte, wenn man auf den 5ten Stern klickt, alle anderen sterne auch gelb werden. Wenn man auf den zweiten Stern klickt, nur die ersten zwei gelb werden. Ich denke einige haben so etwas schon mal gesehen :)
Ich habe das script hier im Internet gefunden und frage mich nun warum es nicht funktioniert...Ohne mausover sind alle Sterne grau!

  
.stern1, .stern2, .stern3, .stern4, .stern5 {  
	display: inline-block;  
	width: 20px;  
	height: 20px;  
	background: url(images/sterngrau.png);  
}  
  
.stern1:hover, .stern2:hover, .stern3:hover, .stern4:hover, .stern5:hover {  
	background: url(images/stern.png);  
}  
  
.sterne1 .stern1 {  
	background: url(images/stern.png);  
}  
  
.sterne2 .stern1, .sterne2 .stern2 {  
	background: url(images/stern.png);  
}  
  
.sterne3 .stern1, .sterne3 .stern2, .sterne3 .stern3 {  
	background: url(images/stern.png);  
}  
  
.sterne4 .stern1, .sterne4 .stern2, .sterne4 .stern3, .sterne4 .stern4 {  
	background: url(images/stern.png);  
}  
  
.sterne5 .stern1, .sterne5 .stern2, .sterne5 .stern3, .sterne5 .stern4, .sterne5 .stern5 {  
	background: url(images/stern.png);  
}  

  
<div class='sterne0'>  
	<span class='stern1' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern2' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern3' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern4' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
	<span class='stern5' onclick='this.parentNode.className = this.className.replace(/(\d+)$/, 'e$1');'></span>  
</div>  

Frage: Warum funkt es nicht?

[apsel]

Om nah hoo pez nyeetz, Happynils!

weil es im Quelltext keine Klasse Sterne2 gibt.

Verbesserungsvorschläge:

.stern {         display: inline-block;         width: 20px;         height: 20px;         background: url(images/sterngrau.png); }

.stern:hover, .stern:active, .stern.active {         background: url(images/stern.png); }

<div>         <span class='stern' id="s1" onclick=''></span>         <span class='stern' id="s2" onclick='');'></span>         <span class='stern' id="s3" onclick='');'></span>         <span class='stern' id="s4" onclick=''></span>         <span class='stern' id="s5" onclick='*');'></span> </div>

• Führe eine Funktion aus, die die Klassenzugehörigkeit für die einzelnen Sterne ändert.

Matthias

[JürgenB]

Hallo Happynils,

Zuerstmal, ich kann überhaupt kein Javascript.

ich versuche gerade mir vorzustellen, wie die Mädels und Jungs vom DLRG reagieren, wenn sie der Ertrinkende im Strandbad weit draußen mit "Zuerst mal, ich kann überhaupt nicht schwimmen" begrüßt.

Gruß, Jürgen

[Beat]

ich versuche gerade mir vorzustellen, wie die Mädels und Jungs vom DLRG reagieren, wenn sie der Ertrinkende im Strandbad weit draußen mit "Zuerst mal, ich kann überhaupt nicht schwimmen" begrüßt.

Sie vergessen, dass sie Richter sind und tun ihre verdammte Pflicht.

mfg Beat

[Gunnar Bittersmann]

@@Happynils:

nuqneH

Ohne mausover sind alle Sterne grau! […]
Frage: Warum funkt es nicht?

Sterne funken nicht, sie funkeln.

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Sterne funkeln nicht.

Matthias

[Cheatah]

Hi,

Sterne funkeln nicht.

das verwechselst Du mit Vampiren. *Die* funkeln nicht. Niemals.

Cheatah

[Maxx]

Hallo Nils,

Zuerstmal, ich kann überhaupt kein Javascript.

das ist gut, du brauchst für eine solche Funktion auch kein Javascript.
Zum Beispiel hier:
http://www.search-this.com/2007/05/23/css-the-star-matrix-pre-loaded/

Grüße,

Jochen

[apsel]

Om nah hoo pez nyeetz, Maxx!

die :hover-Geschichte ist sicher kein Problem und mit den Sprites perfekt gelöst.

bei der dauerhaften Markierung kommt man aber imho nicht um eine Klassenänderung umhin, oder man setzt ssi oder dergleichen ein.

Matthias