May 23rd, 2007 - by Paul OB

Recently I had to create a Star Rating system for a client so I thought I’d share with you the techniques I used to accomplish this. If you are not familiar with a Star Rating System, it’s simply a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something.

You may think a simple rollover would accomplish this but difficulty arises because as you rollover each star it should stay highlighted while you light up the next one and so on until the end of the row of stars. If this doesn’t make much sense to you then take a look at what we are going to achieve in this article. (I will leave the server-side coding to someone more knowledgeable and we will just concentrate on the visual aspects of making this effect happen. )

As you can see from the demo the stars stay hovered as you rollover each one. However, as mentioned earlier, the complicated part is that as each star is hovered it should stay alight while the next one is hovered so that if you start at the left side then 1,2,3,4 and 5 stars will be alight as you traverse the row. Usually a rollover will only be active on the anchor that the pointer is currently over making previous anchors loseWeight Exercise their focus and thus their hover effect disappear. A number of current examples use JavaScript to help with this effect but we’ll show that it can be done without any JavaScript at all.

An added difficulty was that the client also wanted any stars that were already lit up (i.e. they already had a default rating) to be switched off when any star was hovered. This means we not only have to keep all the hovered stars alight but we have to turn off the different coloured default rating state.

This is best shown with a screenshot with the mouse pointer at different positions within the row to show the effect I described.

star-explanation1.png

As you can see there is a lot to accomplish here and from all the Star Rating systems I’ve seen so far, none of them accomplish all the above criteria without scripting. I should point out that there are a number of CSS Star Rating articles written already and although this article was produced in isolation the techniques used will be similar because there is really only one way that this can be accomplished. Therefore I cannot claim this method is entirely unique but it does have some extra features.

The Matrix Pre-loaded

The first thing we need to do is to create the images needed for the demonstration – this is not as simple as it seems. In fact the construction of the image is vital to the end result and must be constructed carefully. To avoid rollover delays we are going to use a single image that contains all the states of the rollover buttons. We also avoid any rollover delay by preloading the image when the page first loads. As the image contains many rows of stars we will simply use the background position to manipulate which set of images need to be seen for a particular state.

This is the image we will be using:

star-matrix1.gif

If you study the image you will see that it contains every combination of what could be expected from rolling over any of the stars. It also allows us to set the default rating state. To display any particular row we simply adjust the background-position property to bring into view the row we need. Of course we need to know the exact height of each row to ensure that the element displays correctly.

Into the code we go:

The HTML is actually the simplest part of this demo – we use a basic unordered list.

  1. <ul class="rating onestar">
  2. <li class="one"><a href="#" title="1 Star">1</a></li>
  3. <li class="two"><a href="#" title="2 Stars">2</a></li>
  4. <li class="three"><a href="#" title="3 Stars">3</a></li>
  5. <li class="four"><a href="#" title="4 Stars">4</a></li>
  6. <li class="five"><a href="#" title="5 Stars">5</a></li>
  7. </ul>

To identify each list item correctly we apply a class. The UL itself has 2 classes added to it. The first class (rating) is the basic styling and the second class (onestar) is the default rating. (If you haven’t come across multiple classes before then read this article which explains them in detail.) The onestar class could be changed to another classname to reflect the current default, so you need to set up 5 classes for this. I’ve used names such as onestar, twostar, threestar etc. Don’t be tempted to use digits such as 1star, 2star etc as it is not valid and will be ignored by some browsers because id’s and classes can’t begin with a digit.

The UL has a fixed width and height so we apply the initial default state of the star rating to the background of the UL. In the code above we want one star alight so we add a class of onestar to the UL.

Next, we position our anchors over each star in the image using absolute positioning. It doesn’t matter that the absolute element is removed from the flow because the UL itself is not position absolute and therefore will preserve the flow of the document. To place the anchors inside the UL we set the UL to have a position:relative and thus define a stacking context for further positioned elements.

I have floated the list elements because this keeps IE6 happy.

  1. .rating{
  2. width:80px;
  3. height:16px;
  4. margin:0 0 20px 0;
  5. padding:0;
  6. list-style:none;
  7. clear:both;
  8. position:relative;
  9. background: url(images/star-matrix.gif) no-repeat 0 0;
  10. }
  11. ul.rating li {
  12. cursor: pointer;
  13. /*ie5 mac doesn't like it if the list is floated but ie6 does\*/
  14. float:left;
  15. /* end hide*/
  16. text-indent:-999em;/* hide text*/
  17. }
  18. ul.rating li a {
  19. position:absolute;
  20. left:0;
  21. top:0;
  22. width:16px;
  23. height:16px;
  24. text-decoration:none;
  25. z-index: 200;
  26. }
  27. ul.rating li.one a {left:0}
  28. ul.rating li.two a {left:16px;}
  29. ul.rating li.three a {left:32px;}
  30. ul.rating li.four a {left:48px;}
  31. ul.rating li.five a {left:64px;}

The anchors are empty elements apart from a number which has been hidden using text-indent, but you may want to use a more suitable image-replacement method as I didn’t want to over complicate things here. With the code above we have placed the default state in the background and have now positioned a 16px by 16px anchor over the top of each star to match exactly. Each list needs a class (li.one, li.two etc) so that we can move the anchor into the correct position. Dimensions are critical so make sure you match them carefully.

To set the initial state we need to create our five main classes so that the background position can be changed.

  1. .nostar {background-position:0 0}
  2. .onestar {background-position:0 -16px}
  3. .twostar {background-position:0 -32px}
  4. .threestar {background-position:0 -48px}
  5. .fourstar {background-position:0 -64px}
  6. .fivestar {background-position:0 -80px}

We are using the same image but by changing the background position we can set whatever default we need to using the original matrix for reference.

So far we have not done anything clever (apart from the image construction) — we still need to work out how to hover and hold the previous stars alight while at the same time clear the colour from the stars to the right.

Now you see it – Now you don’t.

Hold on to your hats as here comes the clever stuff. Each anchor is only 16px wide and positioned at 16px intervals along the row but we are now going to change the width and position on hover so that a whole row of images can be overlaid over the existing row. This is done by changing the width of the anchor on hover only and then setting the left position back to the beginning of the row. The effect is that a whole row of 5 stars are overlaid over the default state and creates a new row with the default state apparently turned off and the hovered items lit up. All that needs to be done is to select the correct background image to show for each anchor in the row.

However, the problem isn’t completely solved because when the mouse is now moved back to the left over another star the image displayed just stays the same because we have one anchor basically on top of all the others and at full width. We need some way to keep the effect we have but allow the anchors underneath to apply their hovered images in turn. Luckily we can do this by setting the original anchors to have a higher z-index than the hovered anchor. This will allow the background to stretch full width but keep the anchors on top so that a new image can be effected on rollover.

Therefore on hover we not only change the width and position we also reduce the z-index.

Here is the code to do all the above (Note that IE6 requires overflow:hidden here or it will show some of the image below.)

  1. ul.rating li a:hover {
  2. z-index:2;
  3. width:80px;
  4. height:16px;
  5. overflow:hidden;
  6. left:0;
  7. background: url(images/star-matrix.gif) no-repeat 0 0
  8. }
  9. ul.rating li.one a:hover {background-position:0 -96px;}
  10. ul.rating li.two a:hover {background-position:0 -112px;}
  11. ul.rating li.three a:hover {background-position:0 -128px}
  12. ul.rating li.four a:hover {background-position:0 -144px}
  13. ul.rating li.five a:hover {background-position:0 -160px}

If you are wondering where the numbers come from for the background position then you should refer to the original matrix image and you can see that as each star is 16px high we can work out which image to show at which stage by using the correct height.

Here is a little text matrix that should make it clear what number to use:

key: B=Blank star: O=Orange Star: G = Green Star

colours … .Background position
B B B B B – (0 0)
G B B B B – (0 -16px)
G G B B B – (0 -32px)
G G G B B – (0 -48px)
G G G G B – (0 -64px)
G G G G G – (0 -80px)
O B B B B – (0 -96px)
O O B B B – (0 -112px)
O O O B B – (0 -128px)
O O O O B – (0 -144px)
O O O O O – (0 -160px)

That’s about all there is to it! The above code should work in most browsers — I have tested in ie5 mac, Safari 1.2, ie5 – 7, Firefox 2 and Opera 9 and all seem to behave correctly. However, I would assume that some older browsers may not like the changes we make on hover so make sure as usual you test in the browsers you want to support.

Please refer to the demo for the full source code and CSS.

Further Reading:

http://wellstyled.com/css-nopreload-rollovers.html

http://sandbox.wilstuckey.com/jquery-ratings/

http://komodomedia.com/blog/index.php/2006/01/09/css-star-rating-part-deux/

Be sure to check out part 2 of this article for the back-end solution!

112 Responses to “CSS The Star Matrix Pre-loaded”

1 Dan Schulz

Nice article as always, Paul. :)

2 ses5909

Paul… that is sexy! I will definitely be using this one.

3 Golgotha

Paul is the Good Will Hunting of CSS!

4 Paul OB

Thanks Guys and girls its an interesting technique and well worth documenting :)

6 Jelena

This is just too cool, Paul! Thank you so much for sharing!

7 Ryan Graf

Great work as always Paul. Thanks for the contribution.

8 Brendon Kozlowski

Awesome, absolutely awesome. Thanks, Paul!

Hmmm…should the IE specific styles (such as overflow: hidden) be placed in separate conditional stylesheets? I’ve been using this method, but according to the somewhat dated “Webpage Speed Report”, it suggests not using more than a single stylesheet (or using @import). I much prefer to use standards over hacks, but at the same time, I still have visitors using a connection speed similar to 28.8 bps modems. I often have to balance some interesting things.

9 joe

doesn’t retain state-bah!

10 fastdump

I’m with Joe… The ‘take a look’ example doesn’t save the state of the selected rating. Have we missed something?…

11 Golgotha

@joe and fastdump: the reason the state is not being saved is because there is no server-side code to save the state. The example only shares the client-side code. In order to save the state you would have to use PHP or .NET or otherwise to write what the person clicked on to a database or other storage device.

12 Paul OB

Yes, as Mark said above and as I mentioned in the article this is just the front end and you would of course need to write the serverside code to reconcile your votes and re-display the updated details. Which can easily be done by swapping the class in the ul as appropriate.

13 Alfred Fox

Very good explanation. Thanks for posting this.

14 Dean

What a cool trick! Now I need to come up with an application to use it on. Thanks Paul.

15 Newbie

Great tutorial! Anyone know of a guide to get the backend of the system running in PHP now?

16 Paul OB

I’m afraid my expertise is strictly CSS and I usually leave the back-end to the programmers.

There are a few examples around and you may find more info from the links in the article. Or somewhere like this:

http://www.yvoschaap.com/index.php/weblog/css_star_rater_ajax_version/

However you would have to adapt it of course.

18 cpradio

I’ll write an article on Search-This integrating Paul’s front-end with a backend. Any suggestions? Do you want it to be AJAX capable or physical posting the page to the backend?

19 Paul OB

Hey Matt, That would be a good idea if you could show how the back end works. I would suggest that you describe what you think is the most appropriate way to do it:)

20 Golgotha

@Matt: cool, I would go Ajax to PHP to MySQL. That way it can show n number of votes and when they click on a link it updates to n+1 automagically without needing a page reload to see that my vote was counted.

21 Foxarts

Absolute cool! Thanks

22 Peter Mansen

Not very complicate and nice effect!

23 Golgotha

@Foxtarts: Welcome to Search-This!

@Peter Mansen: Yeah, my boy Paul is wicked smart… Welcome to Search-This :)

24 k3k

this is realy an intresting article.
Thank you

25 CSS The Star Matrix Pre-loaded: Part 2

[…] reading Paul’s article “CSS The Star Matrix Pre-loaded”, I wanted to contribute by writing a back-end solution to the CSS […]

26 felttippin

I’ve put together an extensive article similar to your post on how to use the star rating system from komodomedia using Ruby on Rails.

You can read it here

27 Jesse

Thanks Paul you are the CSS Master. This is a method I’ve never seen before, its AMAZING!!!

28 Coder

This is the coolest.

Thank you.

29 Best of May/June 2007

[…] CSS The Star Matrix Pre-loaded This tutorial describes the design and programming of a star rating system, a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something. […]

[…] CSS The Star Matrix Pre-loaded […]

31 richard

realy nice post.. thnx

32 Mack

Mine refuses to show up in IE6 or IE7. I did change the star image size and it works ok in firefox. Could someone tell me w here I went wrong?

33 No0oB

An extremely useful tutorial, thank you so much for sharing. I hope that I am allowed to use that star matrix on own websites?

34 Paul OB

@Mack, We would need to see what you have done to give an answer to this as it could be anything. Do you have a link to the problem.

@NoOoB – You can use the code wherever you like :)

35 CSS Star Matrix Preloaded - Article

[…] Go ahead and read the article […]

36 Brent

Love the star rating system!! Any chance you could output a copy of the matrix image on a black background?

Thanks,
Brent

37 Paul OB

Hi Brent,

I changed the image background to black (transparent) but you will still need to edit some of the pixels on the stars themselves to make it look better.

http://www.pmob.co.uk/temp/star-ratingblack.htm

38 Best of May/June 2007 at Design Resources

[…] CSS The Star Matrix Pre-loaded This tutorial describes the design and programming of a star rating system, a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something. […]

39 Magic

Hello! How can i use the rating system in beta blogger?

40 Paul OB

@magic – See the follow up article for the back end implementation methods.

http://www.search-this.com/2007/06/04/css-the-star-matrix-pre-loaded-part-2/

41 CSS Resources | DefaultCss.com-CSS Portal

[…] CSS Star Rating System […]

42 trademark registration

I like to know how to use the ratings system in beta blogger as well. Anyone?

43 Paul OB

Sorry I don’t know anything about beta blogger but you might find some information in the server side half of this article:

http://www.search-this.com/2007/06/04/css-the-star-matrix-pre-loaded-part-2/

Or post your query in that thread.

[…] CSS/XHTML only design and tutorial is called the CSS The Star Matrix Pre-loaded. This tutorial is clearly written and images are provided to use when you create the rating system. […]

45 extreme webmaster

Amazing! I never realized this could be so easy. A-ma-zing. Congrats! I’ll be using this technique from now on.

46 Navigate-This

[…] this article we are going to re-visit a technique we first learned in the Star Matrix Pre-loaded article, except that this time we are going to use it to produce a navigation menu. Before we start it may […]

47 home

CSS/XHTML only design and tutorial is called the CSS The Star Matrix Pre-loaded. This tutorial is clearly written and images are provided to use when you create the rating system

48 fitness

Mine refuses to show up in IE6 or IE7. I did change the star image size and it works ok in firefox.

49 Paul OB

Hi fitness, do you have a link to the problem page and I’ll take a look :)

50 nezh

Mine refuses to show up in IE6 or IE7. I did change the star image size and it works ok in firefox.

51 Paul OB

???? See post #49

52 kevin

Hi. I have seen similar but this works really well. I have used it on my local community directory site. However, I added one bit so that the href=”#” doesn’t cause a jump to the top of the page. In the onclick, after any calls to a function you may have (you may have none) just put “return false;”. This does the trick! Example

Cheers

53 Paul OB

Hi Kevin,

Glad you found it useful and thanks for your comments :)

Did you see Matt’s back end solution for this:

http://www.search-this.com/2007/06/04/css-the-star-matrix-pre-loaded-part-2/

To stop the link jumping to the top of the page you could just add a non existent ID like this in the anchors href : href=”#nowhere”

However, if you are using javascript then the anchors should really lead you to a valid destination where users without javascript enabled can vote :)

54 Kinks

A good tutorial, here’s an example that only uses 3 rows of stars and a left offset to achieve the same effect: http://mooka.ath.cx/stareg/

I suppose the only advantage is that creating the star image is less tedious, assuming you want each row to use the same color.

55 SEO Steve

These are some great examples. They are very helpful and useful. Thank you.

56 Fuzz

to get rid of that annoying focus outline that firefox adds to the stars that have been selected just add the ‘-moz-outline:none;’
property to your anchor css

eg :

ul.rating li.one a {left:0;-moz-outline:none;}
ul.rating li.two a {left:16px;-moz-outline:none;}
ul.rating li.three a {left:32px;-moz-outline:none;}
ul.rating li.four a {left:48px;-moz-outline:none;}
ul.rating li.five a {left:64px;-moz-outline:none;}

[…] which will change colour as you hover over them indicating the level at which to rate something.read more | digg […]

58 amino

Really great work!
Could you clarify under which license are published all code snippets?

59 Sam

very nice code, thanks.

60 Lee

This method doesn’t require all those separate images… http://www.komodomedia.com/blog/2005/08/creating-a-star-rater-using-css/

61 Paul OB

@Lee: My method only uses 1 image so I don’t know what you mean.

Also my method is better as it turns off the other stars when you roll over the first star which that method you linked to doesn’t do and makes it hard to select less stars because all the stars stay on.

62 thodo

thank you very much

63 PerS

very nice, thank you for sharing this.

I used it to write a ajax rating snippet for facebook. You can see it here: http://apps.new.facebook.com/ajaxrating/

64 Nishi

Mine shows up fine in FF, but loses its position in IE6 , i.e. the stars drop down to the end of the page (have not tried IE7). You can see it at http://www.desihaat.com/dh/home.html

65 Paul OB

Hi,

The problem has nothing to do with my rating routine :)

The problem is caused by you nesting divs that don’t have a “layout” (haslayout).

Add this to fix the immediate issue.

* html .block{height:1%}

You should note that you can’t wrap a table or any other block element with a span and that is likely to give issues. Only block level elements can wrap other block level elements.

Validate your code to clear out any other structural errors and avoid possible problems later on :)

66 Nishi

Paul OB, Thanks for your insight. You are awesome!

67 Bryce

Paul, if you’re going to force hasLayout, it’s better to use zoom: 1; instead. Even if implemented by the browser, it will mean to set the zoom to 100% (thus changing nothing).

68 dann

As Lee said, the method found at komodomedia.com is better (http://www.komodomedia.com/blog/2006/01/css-star-rating-part-deux/ and http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/) – it also makes it easier to do 9.2 stars or whatever, a la IMDB starbar.

69 dann

Actually, overall I’d say that komodo’s method is better, however as you say, if you do want the other stars to turn off when you roll over then yours is the method to go with. I just can’t see many people thinking that this is essential though.

70 Paul OB

@Dann:”I just can’t see many people thinking that this is essential though.”

lol, – that was what my client asked for and that’s why I created them like that because there were no other methods about that did this :) Quite a few people have found them useful and like that function so I guess “you takes your choice” :)

You can actually change it to half stars or whatever by just creating the graphic as required. There is only one image and yes it’s is a little complicated but that’s mainly because I have used 2 different colours as well (unlike most of the other the methods).

The code is pretty straightforward otherwise and easy to adapt. It all depends on what you want.:)

71 Joel

in this case where is the anchor, how is it named? what is it?

72 Paul OB

Hi Joel,

Sorry but your question makes no sense or my powers of deduction have deserted me today.:)

Please re-state the question and the intent of the question and I’ll try to answer.

Otherwise to answer what you have requested then the anchor is in the code above and named with classes as required.

73 Joel

I am new to this but Paul you will help me to undertand, I have done the first part the Grid or the matrix how you call it, (cool name) I have wanted to personalize it and instead of stars i did orange squares that makes a 6.32 high rows. Now I have discovered and I have already put to work your rating system it is really cool. Now I am trying to figure out how to put my own personalized picture instead of the stars. I want the rating system to be smaller which means I will have to change most of the numbers and that’s what I am trying to figure out. you said that I need to know the exact width and height of my rows Which it is giving me quite a little bit of work.

74 Joel

The Hieght of each square is 7px and the width 11 px I am encountering a problem the height doesn’t want to go lower than 18px and I need it to be 7 px is it to little?

75 Paul OB

Hi Joel,

Do you have a link to the page you are working on and I’ll give you a hand?

If you are talking about IE6 then it won’t reduce the height of an element (that is in haslayout mode) less than the current font-size so you would need to reduce the font-size and line-height accordingly. usually you would set font-size:0 if there is no text in the element (or use overflow:hidden depending on circumstance).

76 Joel

I have the webpage in my computer ?I will copy the code here and the image I will appriciate your help

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Untitled Document

Friends
Lovers
Family
Close Friends
College Friends

1
2
3
4
5

[IMG]http://img136.imageshack.us/img136/6783/relativesratingsystem.gif[/IMG]

77 Joel

in order for me to get the anchor 54 wide and 7px high what do I have to do. Because the whole row measures 54 wide and 7px high and each image is 10px wide and 7px high.

ul.rating li a {
position:absolute;
left:0;
top:7px;
width:10px;
height:7px;
text-decoration:none;
z-index: 200;
}

I am not mistaken I think this is the anchor styling but it won’t go below 19px and I don’t undertand how yours went to 16px and it worked in my dreaweaver cs3 internet explorer 8. plus something else the images are not showing up. I don’t know.

78 Joel

Bro!!! I got it

There was one mistake in the coding

background:url(../sitedefinition/imagenes/imagenes/NYhungry%27s%20grid%20Rating%20system.gif)) no-repeat 0 0;
}

I had to paretisis in after the background:url()) 0 0; That was it!!!

But now another mistake has come up it is showing two raws the dufault onestar and the hovering one below instead of hovering in the onstar one row… any suggestion will count I will continuing to investigate this issue.

79 Paul OB

Hi Joel,

Have you changed the background position measurements when hovered to match your new dimensions?

80 Joel

Hey I got the other mistake

“But now another mistake has come up it is showing two raws the dufault onestar and the hovering one below instead of hovering in the onstar one row… any suggestion will count I will continuing to investigate this issue.”

i had the anchor positioned after the 7px the second row now i put it to zero and then worked out just like your but in the in squares!!!!!!!!!!!!

Yes!

Thank you we appriaciate your help if discover any new feature i wi ll posted in here.

81 Paul OB

Glad you sorted it :)

82 Joel

Thank you!

83 Joel

Do you have any suggestion on how can I leave the rating saved ?

84 Joel

Do you have any suggestion on how can I leave the rating saved ? once I click on the number of stars I wished?

85 Paul OB

If I understand correctly you would need to script that from the back end and then apply the appropriate class so that you get the display you want.

The back end scripting of this is explained in another article.

http://www.search-this.com/2007/06/04/css-the-star-matrix-pre-loaded-part-2/

86 Joel

What the back end means?

Which class are you talking about ratin? or onestar?

87 Paul OB

I’m not sure I understand what you want but there are classes already set up for onestar, twostar, threestar etc which should be added to the parent ul to determine the default number of selected stars.

If you look at the example from the article.

http://www.pmob.co.uk/temp/star-rating.htm

It shows every combination in action so should be easy to follow.

Obviously when someone clicks the star then that’s when your scripting should take over and work out the results and ratings and display them accordingly.

The back end (as I called it) scripting/coding isn’t a css issue and isn’t part of this article but is explained in the follow up article I already linked to.

88 Joel

I am trying to undertand the database article, I think your css is a sucess i am quering Cpradio your partner in the other article because I keep analizing it over and over.

Thank you though for you css part it really works.

89 Joel

Hi Paul!!

I have finally finished putting together Cpradio article’s on the rating system for server side client, and since it’s been hard to get a hold of him I want to ask you about an error that comes up after I try to refresh the server-side coded Rating system on the internet explorer 8 browser. The following error goes like this

Hi Guys I finished everything but i am getting an error here when i try to refresh it in the internet explorer 8 the following message goes like:

Warning: require_once(classes/include.all.php) [function.require-once]: failed to open stream: No such file or directory in C:\wamp\www\rating-example.php on line 2

Fatal error: require_once() [function.require]: Failed opening required ‘classes/include.all.php’ (include_path=’.;C:\php5\pear’) in C:\wamp\www\rating-example.php on line 2

Do you or anybody else here has any idea on what can be happening here?

90 Paul OB

Hi Joel,

Sorry but I leave those details to the programmers as it’s not a CSS issue and if you can’t get an answer in the other article then you should try the Sitepoint Forums as there are many there willing to help with problems like this:

http://www.sitepoint.com/forums/forumdisplay.php?s=&daysprune=&f=34

It looks like a path issue from the error message you are getting

91 Joel

I think so, it is a path issue!!

Thank you very much Appriciate your link, I will continue going that way and inform you in updates that I resolve thank you bro.

92 Joel

I have another question Can I use wampserver+MySQL and dreamweaver that able php to work on CpRadio server side code for the rating system? or do I have to download the php program instead of using dreamweaver?

93 Paul OB

Hi,

I’m not sure I understand the question exactly. Isn’t wampserver just an installation of Apache,Mysql and PHP that lets you run things locally?

As far as I know Dreamweaver doesn’t really have anything to do with it apart from managing your documents and connections.

There is an article here about using DW with php etc.

http://www.adobe.com/devnet/dreamweaver/articles/setting_up_php.html

94 GPSDeals

Really great work!
Could you clarify under which license are published all code snippets?

95 Paul OB

All the code I provide in the examples is my own work and I do not copyright it so you are free to use as you wish and at your own risk.

After all it’s only CSS in a certain order :)

96 Paul OB

@GPSDeals I should point out that i’m talking about code in my examples only and nothing to do with the rest of search-this.com which has nothing to do with me and you would need to contact the owner (Mark) about other articles etc.

97 co.ador

Paul OB I have posted a post in sitepoint on how to build this rating system and I have invited all the guys to come and join it. I want to print five rows of stars one below the other. The way they are put in the browser by the file rating-example.php found on the zip of the server-side-coding part done by Cradio print each row distant from each other I want to get them closer together but I don’t know if to achieve that modifying the css file or by one of the file Cpradio has created in his server-side-coding part tutorial of this matrix css rating system tutorial.

Thank you.

98 Paul OB

co.ador send me a link to the thread you have started and I’ll take a look.

99 Ted J.

Thanks a lot for the tutorial Paul. :)

I have a question though: how can I make the ratings appear inline, so that text can be on the same line as the star rating?

For example:

Rate this article: [star-matrix1.gif] (43 votes)

100 Paul OB

Hi,

You could do something like this:

http://www.pmob.co.uk/temp/star-rating3.htm

101 Ted J.

Thanks a lot for the help Paul

One last question, is there a way to hide the green stars when hovering, which makes the orange ones visible? The reason why is because I’d like to use a PNG image because they allow transparency/opacity,but I discovered that the orange stars are being loaded on top of the green ones, so when using a PNG image they’re still visible behind the orange ones, which looks bad.

102 Paul OB

Hi Ted,

You could hide the initial stars for IE7 upwards by doing this:

ul.rating:hover{background:none!important}

It would need a change of design for ie6 though.

103 Ted J.

Where would I put that in the CSS? Does it matter? I can’t seem to get it to work.

104 Paul OB

You can put anywhere you like as long as the ul that holds the stars is called .rating.

It will hide the green stars as soon as the stars are rolled over.

It won’t work in IE6 though.

105 Ted J.

Thanks a lot, it works perfectly now :)

106 azhar2day

this is wonderful ..

i read it 3 times and get a fantastic results and sure i put a copy of this lesson on my site here

http://www.azhar2day.com/vb

107 Sylwester w Górach

is there any whay to put it in the world press ?? it would be fine add to this script.

108 Paul OB

@Sylwester:Feel free to use the code in the article (at your own risk of course).

109 Chris P

Great Script! using it thx.

110 mobile crusher

I am new to this but Paul you will help me to undertand, I have done the first part the Grid or the matrix how you call it, (cool name) I have wanted to personalize it and instead of stars i did orange squares that makes a 6.32 high rows. Now I have discovered and I have already put to work your rating system it is really cool. Now I am trying to figure out how to put my own personalized picture instead of the stars. I want the rating system to be smaller which means I will have to change most of the numbers and that’s what I am trying to figure out. you said that I need to know the exact width and height of my rows Which it is giving me quite a little bit of work.

111 Paul OB

HI,

It shouldn’t be that hard to change the size of the images as long as you follow it through.

The stars were 16px by 16px in my example and all the positions were multiples of that:

key: B=Blank star: O=Orange Star: G = Green Star

colours … .Background position
B B B B B – (0 0)
G B B B B – (0 -16px)
G G B B B – (0 -32px)
G G G B B – (0 -48px)
G G G G B – (0 -64px)
G G G G G – (0 -80px)
O B B B B – (0 -96px)
O O B B B – (0 -112px)
O O O B B – (0 -128px)
O O O O B – (0 -144px)
O O O O O – (0 -160px)

If your image was smaller then just reduce the above to match and then change the list and anchor sizes to match also.

I’d need to see an example to help any further :)

[…] CSS The Star Matrix Pre-loaded You may think a simple rollover would accomplish this but difficulty arises because as you rollover each star it should stay highlighted while you light up the next one and so on until the end of the row of stars. […]

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading