Page 1 of 1

Star-rating system like amazon's

Posted: Sun Oct 29, 2006 6:21 pm
by Luke
I don't know if you guys remember the checkbox styling script I posted here a while back, but I'm trying to figure out a way to integrate it into a ranking system for an ecommerce site I'm working on... I'd like it to be sort of like amazon's where there are five stars. On theirs if you click or hover over the a star, it and all stars less than it are highlighted. I'm wondering how I could do this with this script...

Radio Button styling Script

I know I would need to mess with this part of the code, but I'm having difficulty getting it to work...

Code: Select all

	function toggleRadiobox(rbObj,rbKey,rbGroup,rbId)
	{
	if (rbKey==0||rbKey==32){
	var inputFields = document.getElementsByTagName("a");
		for (var inputIndex=0;inputIndex<inputFields.length;inputIndex++)
			{
				if (inputFields[inputIndex].getAttribute("name")==rbGroup){
					
					if(inputFields[inputIndex].className.indexOf("RadioboxChecked")<0)
									{var RadioBoxType = inputFields[inputIndex].className.replace("RadioboxUnchecked","");}
									else
									{var RadioBoxType = inputFields[inputIndex].className.replace("RadioboxChecked","");}
									
					inputFields[inputIndex].className="RadioboxUnchecked"+RadioBoxType;
					}
			}
	var inputFields = document.getElementsByTagName("input");
		for (var inputIndex=0;inputIndex<inputFields.length;inputIndex++)
			{
				if (inputFields[inputIndex].getAttribute("name")==rbGroup)
					{
						if (inputFields[inputIndex].getAttribute("id")==rbId)
							{
								if(rbObj.className.indexOf("RadioboxChecked")<0)
									{var RadioBoxType = rbObj.className.replace("RadioboxUnchecked","");}
									else
									{var RadioBoxType = rbObj.className.replace("RadioboxChecked","");}

								inputFields[inputIndex].checked = true;rbObj.className="RadioboxChecked"+RadioBoxType;}
							else
							{inputFields[inputIndex].checked = false;}
					}
			}
	return false;
	}
	}
Click here to see the desired effect (it's the five stars just above the linked post where it says "Rate this item to improve your recommendations)

Thanks for your help guys... any advice would be appreciated!