Results 1 to 6 of 6

Thread: Star rating image

  1. #1
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Star rating image

    I have been searching the web for a way to take an average number from my database and repersent it on a 5 star image.

    For instance if a band on my website has an average rating of 3 then three stars will be yellow and the other two will remain gray.

    Right now I'm trying to do it with just css.

    Any suggestions would be great.

    Thanks a bunch.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Er, CSS can't touch databases. You can fiddle with the images though (try having a pixel-sized element with background-repeat: repeat-x; and resizing it).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Putting that together with the database will work fine, too.
    For example, http://php-mysql-tutorial.com
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Jul 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the responses.

    I just found a css based star rating script at

    http://komodomedia.com/blog/index.ph...ing-part-deux/


    If works great, and its free. I use coldfusion to retrive data from mysql.

    trying to get it to work right know, we'll see what happens.

    here is the css and html,

    Code:
    <style type="text/css">
    	.star-rating,
    .star-rating a:hover,
    .star-rating a:active,
    .star-rating a:focus,
    .star-rating .current-rating{
    	background: url(../images/star_rating.gif) left -1000px repeat-x;
    }
    .star-rating{
    	position:relative;
    	width:125px;
    	height:25px;
    	overflow:hidden;
    	list-style:none;
    	margin:0;
    	padding:0;
    	background-position: left top;
    }
    .star-rating li{
    	display: inline;
    }
    .star-rating a, 
    .star-rating .current-rating{
    	position:absolute;
    	top:0;
    	left:0;
    	text-indent:-1000em;
    	height:25px;
    	line-height:25px;
    	outline:none;
    	overflow:hidden;
    	border: none;
    }
    .star-rating a:hover,
    .star-rating a:active,
    .star-rating a:focus{
    	background-position: left bottom;
    }
    .star-rating a.one-star{
    	width:20%;
    	z-index:6;
    }
    .star-rating a.two-stars{
    	width:40%;
    	z-index:5;
    }
    .star-rating a.three-stars{
    	width:60%;
    	z-index:4;
    }
    .star-rating a.four-stars{
    	width:80%;
    	z-index:3;
    }
    .star-rating a.five-stars{
    	width:100%;
    	z-index:2;
    }
    .star-rating .current-rating{
    	z-index:1;
    	background-position: left center;
    }	
    
    /* for an inline rater */
    .inline-rating{
    	display:-moz-inline-block;
    	display:-moz-inline-box;
    	display:inline-block;
    	vertical-align: middle;
    }
    
    /* smaller star */
    .small-star{
    	width:50px;
    	height:10px;
    }
    .small-star,
    .small-star a:hover,
    .small-star a:active,
    .small-star a:focus,
    .small-star .current-rating{
    	background-image: url(../images/star_rating.gif);
    	line-height: 10px;
    	height: 10px;
    }
    </style>
    
    <ul class='star-rating'>
    	<li class='current-rating'> style='width:105px;' Currently 3.5/5 Stars.</li>
    	<li><a href='#' title='1 star out of 5' class='one-star'>1</a></li>
    	<li><a href='#' title='2 stars out of 5' class='two-stars'>2</a></li>
    	<li><a href='#' title='3 stars out of 5' class='three-stars'>3</a></li>
    	<li><a href='#' title='4 stars out of 5' class='four-stars'>4</a></li>
    	<li><a href='#' title='5 stars out of 5' class='five-stars'>5</a></li>
    </ul>

  5. #5
    Join Date
    Oct 2005
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Did you get this to work.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    There is a supposedly better method listed on that very page at this address:

    http://komodomedia.com/blog/index.ph...-rating-redux/

    Doesn't work in Opera. In FF it works, but rating the next thing cancels any previous rating you made. I didn't even bother checking with IE.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •