asked on
Help found sample vote script code

Can any body help me to found vote only javascripts code? no php
See this code in action
http://www.geekpedia.com/Samples/Rate/stars.htm
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>
Open in new window
pixarksa
ASKER
Thank you for your response but i want voting code with question and result votes
ASKER CERTIFIED SOLUTION
leakim971
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
pixarksa
ASKER
thanks alot leakim971 but how can i customize the result to my choices

:)
leakim971
>how can i customize the result to my choices ?
Which one ?