Best Star Rating System Ever
Posted: Tue Feb 08, 2005 12:16 am
Hi guys and gals,
I'm trying to create a 5-star rating system much like Amazon.com's. If you notce, Amazon uses Javascript to enable a viewer to "highlight" the star of choice via the "onmouseover" command, then click, and in doing so, submit his/her star rating.
I'd like to try creating the same thing using Javascript and some PHP. This is where I need help. I know enough about PHP to submit and display informaiton from a MySQL database, but I don't know how to jumble Javascript and PHP into the same picture... as in upon clicking a star, information is sent to MySQL.
Below is the code I currently have...
Any help would be awesome... and thank you!
I'm trying to create a 5-star rating system much like Amazon.com's. If you notce, Amazon uses Javascript to enable a viewer to "highlight" the star of choice via the "onmouseover" command, then click, and in doing so, submit his/her star rating.
I'd like to try creating the same thing using Javascript and some PHP. This is where I need help. I know enough about PHP to submit and display informaiton from a MySQL database, but I don't know how to jumble Javascript and PHP into the same picture... as in upon clicking a star, information is sent to MySQL.
Below is the code I currently have...
Code: Select all
<html>
<head>
<title>all_stars</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- preload script -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
documentїchangeImages.argumentsїi]].src = changeImages.argumentsїi+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
all_stars_01_ImageMap_01_over = newImage("images/all_stars_01-ImageMap_01_ov.gif");
all_stars_01_ImageMap_02_over = newImage("images/all_stars_01-ImageMap_02_ov.gif");
all_stars_01_ImageMap_03_over = newImage("images/all_stars_01-ImageMap_03_ov.gif");
all_stars_01_ImageMap_04_over = newImage("images/all_stars_01-ImageMap_04_ov.gif");
all_stars_01_ImageMap_05_over = newImage("images/all_stars_01-ImageMap_05_ov.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- / preload script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- text displayed according to star -->
<span id="five_stars" style="font-style: arial; font-size: 8pt; display: none">I love it!</span>
<span id="four_stars" style="font-style: arial; font-size: 8pt; display: none">I like it.</span>
<span id="three_stars" style="font-style: arial; font-size: 8pt; display: none">It's OK.</span>
<span id="two_stars" style="font-style: arial; font-size: 8pt; display: none">I don't like it.</span>
<span id="one_stars" style="font-style: arial; font-size: 8pt; display: none">I hate it.</span>
<!-- / text -->
<br /><br />
<img name="all_stars_01" src="images/all_stars_01.gif" width="101" height="20" border="0" alt="" usemap="#all_stars_01_Map">
<map name="all_stars_01_Map">
<area shape="rect" alt="" coords="78,0,91,20" href="#" id="5"
onmouseover="changeImages('all_stars_01', 'images/all_stars_01-ImageMap_05_ov.gif'); five_stars.style.display=''; return true;"
onmouseout="changeImages('all_stars_01', 'images/all_stars_01.gif'); five_stars.style.display='none'; return true;">
<area shape="rect" alt="" coords="63,0,78,19" href="#" id="4"
onmouseover="changeImages('all_stars_01', 'images/all_stars_01-ImageMap_04_ov.gif'); four_stars.style.display=''; return true;"
onmouseout="changeImages('all_stars_01', 'images/all_stars_01.gif'); four_stars.style.display='none'; return true;">
<area shape="rect" alt="" coords="50,0,63,19" href="#" id="3"
onmouseover="changeImages('all_stars_01', 'images/all_stars_01-ImageMap_03_ov.gif'); three_stars.style.display=''; return true;"
onmouseout="changeImages('all_stars_01', 'images/all_stars_01.gif'); three_stars.style.display='none'; return true;">
<area shape="rect" alt="" coords="36,0,50,19" href="#" id="2"
onmouseover="changeImages('all_stars_01', 'images/all_stars_01-ImageMap_02_ov.gif'); two_stars.style.display=''; return true;"
onmouseout="changeImages('all_stars_01', 'images/all_stars_01.gif'); two_stars.style.display='none'; return true;">
<area shape="rect" alt="" coords="22,0,36,19" href="#" id="1"
onmouseover="changeImages('all_stars_01', 'images/all_stars_01-ImageMap_01_ov.gif'); one_stars.style.display=''; return true;"
onmouseout="changeImages('all_stars_01', 'images/all_stars_01.gif'); one_stars.style.display='none'; return true;">
</map>
</body>
</html>