am trying to get the 5 star rating using the html5 and css.
What i have done is, i have taken 2 images one is red and green color stars.
inititally the star will be red, when we click the stars to rating, the till the clicked star it should get green.
so i used onclick change image...
here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="images/1.png";
}
else
{
element.src="images/2.png";
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
</body>
</html>
what i need now is, when i click the stars for rating, only the first star is getting changed. instead till the star i clicked should get color changed...
how can i do this???
am trying to get the 5 star rating using the html5 and css.
What i have done is, i have taken 2 images one is red and green color stars.
inititally the star will be red, when we click the stars to rating, the till the clicked star it should get green.
so i used onclick change image...
here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="images/1.png";
}
else
{
element.src="images/2.png";
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
</body>
</html>
what i need now is, when i click the stars for rating, only the first star is getting changed. instead till the star i clicked should get color changed...
how can i do this???
Share Improve this question edited Oct 11, 2013 at 12:55 War10ck 12.5k7 gold badges44 silver badges55 bronze badges asked Oct 11, 2013 at 12:37 MintYMintY 6435 gold badges12 silver badges23 bronze badges 2- 1 you are using the same ID for all your images - ID is a unique attribute and cannot be used in such manner, use classes instead – Zathrus Writer Commented Oct 11, 2013 at 12:38
- 1 Since this has nothing whatsoever to do with canvas, please remove the canvas tag. You also aren't using jquery, though you could. – Dark Falcon Commented Oct 11, 2013 at 12:39
2 Answers
Reset to default 3Firstly use jQuery to hook up your events, using on attributes is very outdated. Secondly, you have duplicated id attributes, which is invalid. Finally, you can use prevAll() to get all the preceding elements and update them. Try this:
<div class="rating-container">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
</div>
$(function() {
$('.rating-container .star').click(function() {
$('.rating-container .star').prop('src', 'images/1.png');
$(this).prevAll('.star').addBack().prop('src', 'images/2.png');
});
});
Example fiddle
Note the example is changing the class of some div elements as I don't have access to your images, but the logic is the same.
my last approach was to use a "star mask" png image where the stars are transparent, and behind that container theres a div animating to the percentual representation of the points, i likethe effect und you have very precise amount
function updateStars() {//Animatestars in Searchresult
$('.stars').each(function (i){
var el = $(this).find('.countSpan').text();
var amount = (parseFloat(el) * 2) * 10 ;
$('.Newstar_bar').eq(i).animate({'width': amount+'%'},1000,'easeOutQuint');
console.log('updatedStars with amount : '+amount);
});
}
html :
<div class="stars" >
<div class="Newstar_container" style="top:-5px;">
<div class="Newstar_background"></div>
<div class="Newstar_bar"></div>
<div class="Newstar_wrap"></div>
</div>
<span class="countSpan" style="display:none">2.3</span>
</div>