Page 1 of 1

Best Star Rating System Ever

Posted: Tue Feb 08, 2005 12:16 am
by iamkoa
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...

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) &#123;
	if (document.images) &#123;
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	&#125;
&#125;

function changeImages() &#123;
	if (document.images && (preloadFlag == true)) &#123;
		for (var i=0; i<changeImages.arguments.length; i+=2) &#123;
			document&#1111;changeImages.arguments&#1111;i]].src = changeImages.arguments&#1111;i+1];
		&#125;
	&#125;
&#125;

var preloadFlag = false;
function preloadImages() &#123;
	if (document.images) &#123;
		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;
	&#125;
&#125;

// -->
</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>
Any help would be awesome... and thank you!

Posted: Tue Feb 08, 2005 12:44 am
by feyd
since you are using an image map, you can set the href to the url of the processing script followed by some url parameters to pass the "submission" data.

Posted: Tue Feb 08, 2005 1:39 am
by iamkoa
feyd wrote:since you are using an image map, you can set the href to the url of the processing script followed by some url parameters to pass the "submission" data.
Can you code an example?

Posted: Tue Feb 08, 2005 1:44 am
by feyd

Posted: Tue Feb 08, 2005 3:40 am
by patrikG
iamkoa wrote:
feyd wrote:since you are using an image map, you can set the href to the url of the processing script followed by some url parameters to pass the "submission" data.
Can you code an example?
Can you write a cheque to the guy who is doing all the work for you? :evil: