1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
|
<head>
<LINK rel="stylesheet" type="text/css" href="styles.css"/>
<script>
var n = 5;
function init(){
var html = '';
for (i=0; i<n; i++){
id = i+1;
html += '<a href="#"><img src="starOut.png" ';
html += 'id="star" value="off" ';
html += 'onMouseOver="over('+id+');" ';
html += 'onMouseOut="out('+id+');" ';
html += 'onClick="on('+id+')"/></a>'
}
document.getElementById("classement").innerHTML = html;
}
function over(nb){
elemClassement = document.getElementById("classement");
tabImg = elemClassement.getElementsByTagName("img");
if (nb > 0)
for (i=0; i<nb; i++)
tabImg[i].src="starOver.png";
for (i=nb; i<n; i++)
tabImg[i].src="starOut.png";
}
function out(nb){
elemClassement = document.getElementById("classement");
tabImg = elemClassement.getElementsByTagName("img");
for (i=0; i<nb; i++)
tabImg[i].src="starOut.png";
for (i=0; i<n; i++){
if (tabImg[i].value == "on")
tabImg[i].src="starOn.png";
}
}
function on(nb){
elemClassement = document.getElementById("classement");
tabImg = elemClassement.getElementsByTagName("img");
for (i=0; i<nb; i++){
tabImg[i].src="starOn.png";
tabImg[i].value="on";
}
for (i=nb; i<n; i++){
tabImg[i].src="starOut.png";
tabImg[i].value="off";
}
elemComment = document.getElementById("commentaire");
switch(nb){
case 1:
text="Médiocre";
break;
case 2:
text="Mauvais";
break;
case 3:
text="Moyen";
break;
case 4:
text="Bon";
break;
case 5:
text="Excellent";
break;
default:
text="";
}
//text = nb+" étoiles";
elemComment.innerHTML = text;
}
</script>
</head>
<body>
<div id="classement" name="cls">
<script>init();</script>
</div><br>
<div id="commentaire"></div>
</body> |
Partager