Using CSS to make star ratings _ Experience Exchange

first look at the effect

Step 1:xhtml

<ul class= "Star-rating" >
<li><a href= "#" title= "rate the 1 star out of 5" class= "One-star" >1</a></li>
<li><a href= "#" title= "rate the 2 stars out of 5" class= "Two-stars" >2</a></li>
<li><a href= "#" title= "rate the 3 stars out of 5" class= "Three-stars" >3</a></li>
<li><a href= "#" title= "rate the 4 stars out of 5" class= "Four-stars" >4</a></li>
<li><a href= "#" title= "rate the 5 stars out of 5" class= "Five-stars" >5</a></li>
</ul>

Only static technology is introduced here, and then the application of the system is given, and you can try it yourself, and use Ajax to make a brilliant effect.

Step 2: Images | Graphics

In order to save your space and broadband, we use GIF, this picture is the button of scoring.

Figure

Step 3:css

. star-rating{
List-style:none; /* Turn off the default list image bullets*/
margin:3px; /*i Wan ' t some space around this thing*/
padding:0px; /* I ' m anal. I ' m pretty sure OL ' s has a default padding of 0px, but we'll set it to 0px just to be safe*/
width:100px; /*this list is 5 stars, each star was 20px, therefore it should be 5 x 20px = 100px wide*/
height:20px; /* The height of each star is 20px. Since This is a horizontal list, we'll set the list height to the height of the star.*/
position:relative; /*very important. We'll be using absolute positioning later. We want to use Relatively-absolute positioning.*/
Background:url (star_rating.gif) top left repeat-x; /* By repeating this image horizontally, the list would appear to the five stars.*/
}

According to the code we know:
Removed the UL margin and padding as well as List-style, defining a block with a height of 20px width 100px

Down when the button element is made, the following is the CSS

. star-rating li{
padding:0px; /* No padding at all*/
margin:0px; /* No margin at all*/
/*\*//*backslash hack, this causes IE5 MAC isn't to see this rule*/
Float:left; /* For all other browser, we is going to float left, this makes a horizontal list*/
/* */* End the IE5 backslash hack*/
}

This code allows Li to achieve horizontal emissions and solve IE5 MAC bugs

Inherit the button element style above, then define the mouse action, the following is the CSS

. star-rating Li A{
Display:block; /* We want a block item, so the we can mess with its height and width*/
width:20px; /* Easy stuff, we want the width of the same as the star width*/
height:20px; /* Same as the width*/
Text-decoration:none; /* Remove the underline from the link*/
Text-indent: -9000px; /* Indent the text off the screen using a [url=http://www.php.cn/]image-replacement technique[/url], we dont want to see t He text anymore.*/
z-index:20; /*we ' ll come back to this*/
Position:absolute; /*we can now control the exact x and y coordinates of all Star, relative to the parent ul*/
padding:0px; /*once again, we don ' t need any padding*/
Background-image:none; /* We'll not show the star*/
}

Star-rating Li a:hover{
Background:url (star_rating.gif) left bottom; /*this is where the magic is*/
Z-index:1; /*move this star to the bottom of the Z-index stack*/
left:0px; /*move This star all the same as the left, aligned with the side of the UL parent item*/
17.}

Down we have to think about how we can show different stars, Samsung? What is the principle, we continue to repeat the background image horizontally, then define the width of a and a:hover to differentiate the chosen star rating.

Here is the CSS

. star-rating a.one-star{
left:0px;
}
. star-rating a.one-star:hover{
width:20px;
}
. star-rating a.two-stars{
left:20px;
}
. star-rating a.two-stars:hover{
width:40px;
}
. star-rating a.three-stars{
left:40px;
}
. star-rating a.three-stars:hover{
width:60px;
}
. star-rating a.four-stars{
left:60px;
}
. star-rating a.four-stars:hover{
width:80px;
}
. star-rating a.five-stars{
left:80px;
}
. star-rating a.five-stars:hover{
width:100px;
}

By this, this production is completed

The first model ignores the half-star situation and has no initial star rating, and down we are going to solve this problem.

Step 1. First look at the effect | Check it in action

Figure 1

Look at the effect

Step 2:the XHTML

<ul class= "Star-rating" >
<li class= "current-rating" >currently 3.5/5 stars.</li>
<li><a href= "#" title= "1 star out of 5" class= "One-star" >1</a></li>
<li><a href= "#" title= "2 stars out of 5" class= "Two-stars" >2</a></li>
<li><a href= "#" title= "3 stars out of 5" class= "Three-stars" >3</a></li>
<li><a href= "#" title= "4 stars out of 5" class= "Four-stars" >4</a></li>
<li><a href= "#" title= "5 stars out of 5" class= "Five-stars" >5</a></li>
</ul>

Similar to the structure of the first model, the only difference is:

<li class= "current-rating" >currently 3.5/5 stars.</li>

Defining initial values

Step 3:the Star Image

We make a picture with three stars, the first star is a null value, the second is the value to select, and the third is the real value.

Figure 2

Step 4:the CSS, the Magic

. star-rating li.current-rating{
Background:url (star_rating.gif) left bottom;
Position:absolute;
height:30px;
Display:block;
Text-indent: -9000px;
Z-index:1;
}

He defines the initial value, in order to avoid inheriting the relative positioning of the container ul, using Position:absolute; the height of each star is height:30px; the other is to hide the text and define the alignment.

Null value CSS

. star-rating{
...
Background:url (star_rating.gif) top left repeat-x;
}

Select Value CSS

. star-rating Li A:hover{
Background:url (star_rating.gif) left center;
...
}

The initial value will, of course, change with the selection, so how do you make it change?

<li class= "current-rating" style= "width:105px;" >currently 3.5/5 stars.</li>

Look at this piece of code and believe you know what the reason is! How is this width calculated?

Average rating| Average: 3.5
Each star width| the width of each of the stars: 30px;
Set width to| is set to: 3.5 * = 105px

Let's take a look at this new model.
* Example 1:150 x star rating system
* Example 2:125 x star rating system
* Example 3:25 x vertical star rating system

We use PHP to implement

The first is the principle of implementation

Star ratings I, II from the previous CSS, however, can be seen as long as the onclick is recognized and the data is stored in the database, and then the data is called from the database to calculate the
You can get the current scoring average-the current score.

1. The following is the SQL that establishes the database

CREATE TABLE Ratings (
ID INT not NULL auto_increment PRIMARY KEY,
Total_votes INT not NULL,
Total_value INT not NULL,
which_id INT not NULL,
Which_table VARCHAR (255),
Used_ips Longtext NULL
);

2. parameter File Reference

<?php
Require ("connectdb.php");
Require ("closedb.php");
Require ("tablename.php");
Require ("opendb.php");
?>

3. Show voting procedure and update voting data program

<?php
$rating _posted=$_get[' vote '];//pased variable by the Stars value
$id =$_get[' id '];
$query =mysql_query ("Select Total_votes, Total_value, used_ips from $tableName WHERE id= '". $id. " ") or Die (" Error: ". Mysql_error ());
$numbers =mysql_fetch_assoc ($query);
$checkIP =unserialize ($numbers [' used_ips ']);
$count = $numbers [' total_votes '];//how many votes total
$current _rating= $numbers [' Total_value '];//total Number of rating added together and stored
$sum = $rating _posted+ $current _rating;//Add together the current vote value A nd the total vote value
$tense = ($count ==1)? "Vote": "votes";//plural form votes/vote
$voted = @mysql_fetch_assoc (@mysql_query ("select title from $tableName WHERE used_ips like '% '. $_server[' REMOTE_ADDR ']. " % ' and id= ' $id ')); Pattern Match ip:suggested by bramus! http://www.php.cn/-This variable searches through the previous IP address, that has voted and returns TRUE or false

if ($voted) {
echo "<p class=\" rating\ ">".
"<ul class=\" star-rating\ ">".
"<li class=\" current-rating\ "style=\" width: ". @number_format ($current _rating/$count, 2) *20. " Px;\ ">current rating.</li>".
"<li class=\" one-star\ ">1</li>".
"<li class=\" two-stars\ ">2</li>".
"<li class=\" three-stars\ ">3</li>".
"<li class=\" four-stars\ ">4</li>".
"<li class=\" five-stars\ ">5</li>".
"</ul>".
"<p>rating: <strong>". @number_format ($current _rating/$count, 2). " </strong> {". $count." ". $tense." Cast} <br/>you has previously voted.</p></p> ";//show the current value of the vote with the Current numbers
}else{

if (Isset ($_get[' vote ')) {

if ($sum ==0) {
$added =0;//checking to see if the first vote have been tallied
}else{
$added = $count +1;//increment The current number of votes
}

if (Is_array ($checkIP)) {
Array_push ($checkIP, $_server[' remote_addr ');//if it is an array i.e. already have entries the push in another value
}else{
$checkIP =array ($_server[' remote_addr ');//for the first entry
}

$insert =serialize ($checkIP);
mysql_query ("UPDATE $tableName SET total_votes= '". $added. "', total_value= '". $sum. "', used_ips= '". $insert. " WHERE id= '. $_get[' id ']. "'");

echo "<p class=\" rating\ "><p>rating: <strong>". @number_format ($sum/$added, 2). " </strong> {". $added." ". $tense." Cast} <span>thank you for your vote!</span></p></p> ";//show the updated value of the VO Te
}else{
?>

4. Visitor scoring Procedure

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title>css:star rater example</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link href= "Styles2-1.css" rel= "stylesheet" type= "Text/css" media= "All" >
<body>
<p class= "rating" >
<p>how Clear is this tutorial?</p>
<ul class= "Star-rating" >
<li class= "current-rating" style= "width:<?php Echo @number_format ($current _rating/$count, 2) *20?>px;" >current rating</li>
<li><a href= "<?php echo $_server[' php_self ']. "?". $_get[' section '. "&id=". $_get[' id ']. "&vote=1";? > "title=" rate the 1 star out of 5 "class=" One-star ">1</a></li>
<li><a href= "<?php echo $_server[' php_self ']. "?". $_get[' section '. "&id=". $_get[' id ']. "&vote=1";? > "title=" rate this 2 stars out of 5 "class=" Two-stars ">2</a></li>
<li><a href= "<?php echo $_server[' php_self ']. "?". $_get[' section '. "&id=". $_get[' id ']. "&vote=1";? > "title=" rate this 3 stars out of 5 "class=" Three-stars ">3</a></li>
<li><a href= "<?php echo $_server[' php_self ']. "?". $_get[' section '. "&id=". $_get[' id ']. "&vote=1";? > "title=" rate this 4 stars out of 5 "class=" Four-stars ">4</a></li>
<li><a href= "<?php echo $_server[' php_self ']. "?". $_get[' section '. "&id=". $_get[' id ']. "&vote=1";? > "title=" rate this 5 stars out of 5 "class=" Five-stars ">5</a></li>
</ul>
</body>

5. Latest Scoring Results tips

<?php
echo "<p>rating: <strong>". @number_format ($sum/$count, 2). " </strong> {". $count." ". $tense." Cast}</p></p> ";//show the current updated value of the vote
}//End Isset get vote
}//end voted true, False
?>

