CSS "Star Rating" Systeem
Jullie hebben vast wel vaker op websites gezien waarbij je een score van iets ziet in de vorm van sterren. Dit script heeft hetzelfde principe, maar dan met een mooi mouseover systeem wanneer jezelf een stem uitbrengt. Ik had een script als dit nodig, maar heb besloten het ook met jullie te delen. Enjoy! Features: - Geen JavaScript benodigd. - Toch mooi effect door middel van CSS. - Mooi klein script. - Makkelijk uit te bouwen. - Makkelijk te integreren in je eigen website. - Veel comments om het leerzaam te houden voor beginners. Notes: In dit script heb ik geen IP filter ofzo, dus je kan oneindig voten. Dit heb ik bewust gedaan om er voor te zorgen dat het script mooi klein en schoon blijft. Zo is het makkelijker voor jullie om het in je eigen website te implementeren, en/of uit te breiden. Voorbeeld: http://217.121.118.194/script/rate/index.php Hier zijn de sterren in andere kleuren te vinden: http://217.121.118.194/script/rate/stars/star_green.gif http://217.121.118.194/script/rate/stars/star_blue.gif http://217.121.118.194/script/rate/stars/star_red.gif http://217.121.118.194/script/rate/stars/star_pink.gif
[code]CREATE TABLE `starvote` (
`id` int(1) NOT NULL auto_increment,
`score` int(5) NOT NULL,
`votes` int(5) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `starvote` (`id`, `score`, `votes`) VALUES
(1, 0, 0);[/code]
[code]<HTML>
<HEAD>
<style>
/* Dit zijn de styles die gebruikt worden door het systeem */
.sterren{
width:80px;
height:16px;
margin:0 0 20px 0;
padding:0;
list-style:none;
clear:both;
position:relative;
background:url(stars/star_green.gif) no-repeat 0 0;
}
.s0star {background-position:0 0}
.s1star {background-position:0 -16px}
.s2star {background-position:0 -32px}
.s3star {background-position:0 -48px}
.s4star {background-position:0 -64px}
.s5star {background-position:0 -80px}
ul.sterren li {cursor:pointer;float:left;text-indent:-999em;}
ul.sterren li a {
position:absolute;
left:0;
top:0;
width:16px;
height:16px;
text-decoration:none;
z-index:200;
}
ul.sterren li.s1 a {left:0}
ul.sterren li.s2 a {left:16px;}
ul.sterren li.s3 a {left:32px;}
ul.sterren li.s4 a {left:48px;}
ul.sterren li.s5 a {left:64px;}
ul.sterren li a:hover {
z-index:2;
width:80px;
height:16px;
overflow:hidden;
left:0;
background:url(stars/star_green.gif) no-repeat 0 0;
}
ul.sterren li.s1 a:hover {background-position:0 -96px;}
ul.sterren li.s2 a:hover {background-position:0 -112px;}
ul.sterren li.s3 a:hover {background-position:0 -128px}
ul.sterren li.s4 a:hover {background-position:0 -144px}
ul.sterren li.s5 a:hover {background-position:0 -160px}
h3{margin:0 0 2px 0;font-size:110%}
</style>
<TITLE>Sterren</TITLE>
</HEAD>
<BODY>
<?php
// Verbinding maken met MySQL.
mysql_connect('localhost','root','');
mysql_select_db('test');
// Stem uitbrengen. (Controle of de stem wel tussen de 1 en de 5 zit)
if(isset($_GET["vote"]) && $_GET["vote"] > 0 && $_GET["vote"] <= 5){
// Oude data ophalen...
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
// ...nieuwe data opslaan...
$new_votes = ($VotesSQL['votes'] + 1);
$new_score = ($VotesSQL['score'] + $_GET["vote"]);
// ...en toevoegen aan de database!
$query = "UPDATE starvote SET score = '".$new_score."', votes = '".$new_votes."'";
mysql_query($query)or die(mysql_error()."<br>".$query);
}
// Votes ophalen en in een string zetten.
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
$votes = $VotesSQL['votes'];
$score = $VotesSQL['score'];
// Gemiddelde berekenen en er netjes 1 waarde van maken; het aantal sterren.
$score != 0 ? $stars = round(($score / $votes)) : $stars = 0;
$stars > 5 ? $stars2 = 5 : $stars2 = $stars;
//$starsTxt = array('s0','s1','s2','s3','four','five');
// Door midden van de aantal sterren, de CSS class definieren in een string.
$StarClass = 'sterren s'.$stars2.'star';
echo $stars.' sterren door '.$votes.' stemmen.';
//Sterren CSS class dynamisch toevoegen, en de sterren weergeven. ?>
<ul class="<?php echo $StarClass; ?>">
<li class="s1"><a href="index.php?vote=1" title="1 Star" onFocus="this.blur()">1</a></li>
<li class="s2"><a href="index.php?vote=2" title="2 Stars" onFocus="this.blur()">2</a></li>
<li class="s3"><a href="index.php?vote=3" title="3 Stars" onFocus="this.blur()">3</a></li>
<li class="s4"><a href="index.php?vote=4" title="4 Stars" onFocus="this.blur()">4</a></li>
<li class="s5"><a href="index.php?vote=5" title="5 Stars" onFocus="this.blur()">5</a></li>
</ul>
</BODY>
</HTML>[/code]
Reacties
0