Coder Wiki | HowTos | JavaScript Sterne

Hier findet ihr ein kurzes Script das eine Reihe aus Sternchen von links bis zum Cursor auffüllt. Ihr benötigt dazu die 2 Grafiken: stern.gif und stern2.gif.

Folgendes Bild sollte die Funktionalität erklären.

Es eignet sich um Bewertungsscript umzusetzen.

[Get Code]

javascript-sterne.html
<html>
<head>
<title>Sterne</title>
 
<script type="text/javascript">
<!--
function star(block, x) {
        var images = document.getElementById(block).getElementsByTagName('img');
        for(var i=0; i<images.length; i++) {
                images[i].src = i<=x?'stern2.gif':'stern.gif';
                images[i].onclick = "alert(5)";
        }
}
//-->
</script>
 
</head>
<body>
 
<div id="sterne1" onmouseout="star('sterne1',-1)">
        <img src="stern.gif" alt="" onmouseover="star('sterne1',0)" />
        <img src="stern.gif" alt="" onmouseover="star('sterne1',1)" />
        <img src="stern.gif" alt="" onmouseover="star('sterne1',2)" />
        <img src="stern.gif" alt="" onmouseover="star('sterne1',3)" />
        <img src="stern.gif" alt="" onmouseover="star('sterne1',4)" />
</div>
 
</body>
</html>

Coder How To's

JavaScript Sterne