Contextual Ads
More JavaScript Resources
Advertisement
 See this code in action
The only HTML elements that we're going to need are 5 images and one div.
<body onload="loadStars()">
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:30px; height:30px; float:left;" /><br /><br />
<div id="vote" style="font-family:tahoma; color:red;"></div>
</body>
Let's move on to the JavaScript code. First we'll declare some variables that we will use later. As you've seen earlier, the body tag calls the loadStars() function. This function preloads the images used to represent the star when it is in focus and when it is not.
<script type="text/javascript">
<!--
var set=false;
var v=0;
var a;
function loadStars()
{
star1 = new Image();
star1.src = "star1.gif";
star2 = new Image();
star2.src= "star2.gif";
}
Now let's write the function that will change the stars on mouse over. If we point to star number 1, it should be highlighted; if we point to star number 2, star 2 and 1 should be highlighted, and so on. So we need to get the image's ID in order to know how many and what stars to highlight. The images use the onmouseover event to trigger the function, and the parameter is it's ID. I've also used an y variable (which is the current ID + 1) as a stop condition in the For loops that this function will use. Also you will see an set variable, i'll explain that later in this tutorial.
function highlight(x)
{
if (set==false)
{
y=x*1+1
switch(x)
{
case "1":
document.getElementById(x).src= star2.src;
document.getElementById('vote').innerHTML="one star";
break;
case "2":
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="two stars"
break;
case "3":
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="three stars"
break;
case "4":
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="four stars"
break;
case "5":
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="five stars"
break;
}
}
}
Depending on the image's ID, the switch statement will run one of the For loops. If the ID is "2", for example, the For loop will run from i=1 to i<3, changing the first and second star and writing "2 stars" in a div. If the ID is "3" a For loop will be run that will write "3 stars" in a div and change star number 1, 2 and 3; and so on for the rest of the IDs.
We now have to make a function that will make the stars not be highlighted once they lose focus. For this, we will use the onmouseout event: onmouseout="losehighlight(this.id)".
function losehighlight(x)
{
if (set==false)
{
for (i=1;i<6;i++)
{
document.getElementById(i).src=star1.src;
document.getElementById('vote').innerHTML=""
}
}
}
This function makes all of the stars appear as not selected, and changes the content of the div to an empty string.
Now we have to write a function that will make the stars remain highlighted once clicked on. So, the event will be onclick="setStar(this.id)".
Finally it's time to explain the set variable. To avoid rating one way and then rating again we've used this set variable. If no star has been clicked the variable will have the false value; after you rate (click on a star) the variable will become true, and the If condition in the functions will not allow to rate again (or highlight stars).
function setStar(x)
{
y=x*1+1
if (set==false)
{
switch(x)
{
case "1":
a="1"
flash(a);
break;
case "2":
a="2"
flash(a);
break;
case "3":
a="3"
flash(a);
break;
case "4":
a="4"
flash(a);
break;
case "5":
a="5"
flash(a);
break;
}
set=true;
document.getElementById('vote').innerHTML="Thank you for your vote!"
}
}
You can see that set becomes true at the end of the function. You can also see the flash() function being called. That function makes the star remain selected, and it also makes it blink a few times, for a nice effect.
function flash()
{
y=a*1+1
switch(v)
{
case 0:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star1.src;
}
v=1
setTimeout(flash,200)
break;
case 1:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
v=2
setTimeout(flash,200)
break;
case 2:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star1.src;
}
v=3
setTimeout(flash,200)
break;
case 3:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
v=4
setTimeout(flash,200)
break;
case 4:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star1.src;
}
v=5
setTimeout(flash,200)
break;
case 5:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
v=6
setTimeout(flash,200)
break;
}
}
-->
</script>
The "v" variable will make this function run for 6 times. You can see here the switch statement and for loops that we used in the highlight function(). The difference is the setTimeout() method that will call the function after 200 miliseconds. So basically, when this function is called, v is 0 and the stars' appearance change, then v becomes 1 and the function is called again after 200 miliseconds changing the appearance of the stars again (as stated in case 1) and v becomes 2. This will go on until v becomes 6, creating a blinking effect.
You can use the code below to create your dynamic star rating system:
<html>
<head>
<title>Dynamic 5 Star Rating Script </title>
<script type="text/javascript">
<!--
var set=false;
var v=0;
var a;
function loadStars()
{
star1 = new Image();
star1.src = "star1.gif";
star2 = new Image();
star2.src= "star2.gif";
}
function highlight(x)
{
if (set==false)
{
y=x*1+1
switch(x)
{
case "1": document.getElementById(x).src= star2.src;
document.getElementById('vote').innerHTML="one star";
break;
case "2":for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="two stars"
break;
case "3":for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="three stars"
break;
case "4":for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="four stars"
break;
case "5":for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML="five stars"
break;
}
}
}
function losehighlight(x)
{
if (set==false)
{
for (i=1;i<6;i++)
{
document.getElementById(i).src=star1.src;
document.getElementById('vote').innerHTML=""
}
}
}
function setStar(x)
{
y=x*1+1
if (set==false)
{
switch(x)
{
case "1": a="1"
flash(a);
break;
case "2": a="2"
flash(a);
break;
case "3": a="3"
flash(a);
break;
case "4":a="4"
flash(a);
break;
case "5":a="5"
flash(a);
break;
}
set=true;
document.getElementById('vote').innerHTML="Thank you for your vote!"
}
}
function flash()
{
y=a*1+1
switch(v)
{
case 0:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star1.src;
}
v=1
setTimeout(flash,200)
break;
case 1:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
v=2
setTimeout(flash,200)
break;
case 2:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star1.src;
}
v=3
setTimeout(flash,200)
break;
case 3:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
v=4
setTimeout(flash,200)
break;
case 4:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star1.src;
}
v=5
setTimeout(flash,200)
break;
case 5:
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
v=6
setTimeout(flash,200)
break;
}
}
-->
</script>
</head>
<body onload="loadStars()">
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:30px; height:30px; float:left;" /><br /><br />
<div id="vote" style="font-family:tahoma; color:red;"></div>
</body>
</html> |
Tutorials
Code
Knowledge Base
News
Forums
Pictures
Videos
Bargains
Icons
Newsgroups
PageRank™ Checker
Alexa Rank Checker
Domain-Name Lookup
(Rated 4 with 297 votes) 
Digg It!
Del.icio.us
Reddit
StumbleIt
Newsvine
Furl
BlinkList
Rate this tutorial
Current Comments
View More Magazines
View More Downloads
