<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
var clickIndex = -1;
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].id = i;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function () {
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].id<=this.id) {
imgs[i].src = 'star2.png';
}
else{
imgs[i].src = 'star1.png';
}
}
};
imgs[i].onmouseleave = function () {
for (var i = 0; i < imgs.length; i++) {
if (i<=clickIndex) {
imgs[i].src = 'star2.png';
} else {
imgs[i].src = 'star1.png';
}
}
};
imgs[i].onclick = function () {
for (var i = 0; i < imgs.length; i++) {
clickIndex = this.id;
}
};
}
}
</script>
</head>
<body>
<img src="star1.png" />
<img src="star1.png" />
<img src="star1.png" />
<img src="star1.png" />
<img src="star1.png" />
</body>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
var clickIndex = -1;
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].id = i;
}
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function () {
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].id<=this.id) {
imgs[i].src = 'star2.png';
}
else{
imgs[i].src = 'star1.png';
}
}
};
imgs[i].onmouseleave = function () {
for (var i = 0; i < imgs.length; i++) {
if (i<=clickIndex) {
imgs[i].src = 'star2.png';
} else {
imgs[i].src = 'star1.png';
}
}
};
imgs[i].onclick = function () {
for (var i = 0; i < imgs.length; i++) {
clickIndex = this.id;
}
};
}
}
</script>
</head>
<body>
<img src="star1.png" />
<img src="star1.png" />
<img src="star1.png" />
<img src="star1.png" />
<img src="star1.png" />
</body>
</html>