How to do AWS stars

[Chris]

How to change numeric customer ratings to stars:



#startop{
z-index: 1;
background-image: url("/images/staryellow.gif");
background-repeat: repeat-x;
height: 12px;
}
#starbottom{
z-index: 0;
background-image: url("/images/stargrey.gif");
background-repeat: repeat-x;
width: 65px;
height: 12px;
}


The two star images are 13x12



$width = $Rating[$m] * 13;
echo '<div id = "starbottom"><div id = "startop" style = "width: '.$width.'px;"></div></div>';


Short and sweet.

Any questions?

[Mike]

Nice :)

I'll add that when I get back from holiday next week.

[incka]

I'll add it when I've uploaded my site...

[GCT13]

I like that technique.

[Chris]

Oh, by the way, you can nab the star images from my kitchen site (#14 in my signature).

[flyingpylon]

Yeah, that's an interesting way to do it. It took me a little while to figure out what you were actually doing. My site just pulls the star images from Amazon and displays them, and they go to half-star increments. This method is more "accurate" but I'm not sure anyone would be able to see the difference unless they really looked. It might be easier to see the differences in a segmented bar or something. If nothing else, it's fewer lines of code.

[Chris]

With larger stars its easier to see too.

[pas]

I'd just repeat the IMG tag. If the CSS doesn't load, isn't support, is turned off, etc., it breaks.

[Chris]

You can't turned CSS off. If it is included on the page itself it can't not load. If it doesn't load hopefully more is messed up than just some stars.

As for browsers that do not support it. At one point you just gotta write them off. You cannot continue to support browsers that are nearing a decade in age.

[pas]

I know I've seen options in browsers (Mozilla, Firebird, Opera, maybe even IE) to enable/disable CSS and/or specify alternate/overriding stylesheets.