I'm basically trying to make a star rating system similar to Windows Media Player or iTunes...
My thought are to start off with a string of gray star outlines in HTML:
☆☆☆☆☆
onMouseOver, they become filled stars in such a way that if I roll over say the 3rd star, stars 1,2 and 3 become filled:
✭✭✭☆☆
and then onMouseOut, they return to their previous state:
☆☆☆☆☆ -but if you click on a star, they stay filled and become black:
✭✭✭☆☆
Basically, whenever you scroll over a star:
1. all stars become gray
2. the star you're on and all stars below it become filled and all stars above it become outlines
The approach I had in mind would basically involve writing functions and calling them on onMouseOver, onMouseOut and onClick events for each star and my dilemma is my lack of extensive javaScript knowledge.
-How would I label the stars so that I can refer to them in functions?
ex)
Code:
function clickStar3(){
`star1`.color='black';
`star2`.color='black';
`star3`.color='black';
`star4`.color='gray';
`star5`.color='gray';}
-With that kind of approach, how would I write functions to change the actual printout for the different stars?
ex)
Code:
function clickStar3(){
`star1`='★';
`star2`='★';
`star3`='★';
`star4`='☆';
`star5`='☆';}
I really appreciate your input...
Thanks in advance!
And here are the javaScript functions:
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
Code:
function overStar(starID){
var starNo = starID.charAt(1);
for(var i=1; i<=starNo; i++){
document.getElementById('s'+i).style.color="red";
}
}
function outStar(starID){
var starNo = starID.charAt(1);
for(var i=1; i<=starNo; i++){
document.getElementById('s'+i).style.color="#666666";
}
}
Let's take it one step at a time- in the code I posted, the stars become red on mouseover and return back to gray on mouseout- the first thing I want to know how to do is change the stars from '☆' (☆) to '★' (★) instead of changing the colors...
j-kizzle, thanks for sharing this. I'm going to modify it to work with multiple star rating bars thingies.
What you need is a solution that doesn't use any global variables or eval or innerHTML or require you to write onmouseover or onmouseout or onclick, and requires the creation of only one span for each rating. Also it should be configurable for number of stars displayed and their colour, and should not be hard-coded to address a particular form element. Link
Where used, return should be executed unconditionally and always as the last statement in the function.
That's my signature, it's not part of the damn post!
I believe the following system at the link below meets most of your objectives for a quality and simple to use star rating system. The only think it does not do is allow different colour stars. It is very easy to embed into HTML, forms, etc. and you also can output the results easily.
I've looked at the code and it does not look too difficult to change the graphics for the stars. LINK.
Reply With Quote
Originally Posted by geetar251
Bookmarks