Best Star Rating System Ever

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
iamkoa
Forum Newbie
Posts: 11
Joined: Sun Feb 06, 2005 11:36 pm

Best Star Rating System Ever

Post 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!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
iamkoa
Forum Newbie
Posts: 11
Joined: Sun Feb 06, 2005 11:36 pm

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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:
Post Reply