1

I'm using this part of code to rate some articles that i formed from MySQL. Rate is done my an option list where someone can rate them with numbers 1,2,3. It is possible to transform somehow this list into 3 stars (with radio buttons, images or something)? 

<form id="ratethis-<?=$PK?>" action="rate.php?idP=<?=$idPK?>"method="post">
 <select name="rating">

 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select> <br> 
 <input type="submit" value="Rate this!"/><br><br>
 </form>
user3158320
  • 33
  • 5
  • 1
    Look at these : http://kubyshkin.ru/posts/star-rating-input-pure-css.html http://css-tricks.com/star-ratings/ http://www.danielkeithjones.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/ – Zzyrk Jan 23 '14 at 12:57

2 Answers2

2

On html:

<ul class="rating">
<span class="strong"><strong><li class="one"><a href="#">1 Star</a></li></strong></span>
<span class="strong"><strong><li class="two"><a href="#">2 Stars</a></li></strong></span>
<span class="strong"><strong><li class="three"><a href="#">3 Stars</a></li></strong></span>
<span class="strong"><strong><li class="four"><a href="#">4 Stars</a></li></strong></span>
<span class="strong"><strong><li class="five"><a href="#">5 Stars</a></li></strong></span>
</ul>

On CSS:

.rating {

margin: 0;

padding: 0;

list-style: none;

clear: both;

width: 75px;

height: 15px;

background-image: url(stars.gif);

background-repeat: no-repeat;

position: relative;

}

.rating li {

text-indent: −9999em;

float: left; /* for IE6 */

}

.rating li a {

position: absolute;

top: 0;

left: 0;

z-index: 20;

height: 15px;

width: 15px;

display: block;

}

.rating .one a {

left: 0;

}

.rating .two a {

left: 15px;

}

.rating .three a {

left: 30px;

}

.rating .four a {

left: 45px;

}

.rating .five a {

left: 60px;

}

Maybe this link could be helpful:

How to create a star ranking system using css

agastalver
  • 1,036
  • 8
  • 13
  • Link only answers are frowned upon here on SO. You should post relevant code snippets from that article within your answer and appropriately cite them. – James Donnelly Jan 23 '14 at 13:01
  • 1
    Oh sorry, new on this. I thought it would be useless to copy & paste. Editting. – agastalver Jan 23 '14 at 13:05
0

Yeah sure, options are numerous:

  1. Just use oldskool links:

    <a href="rate.php?idP=<?php echo $idPK; ?>&rating=1"><img src="star.jpg" /></a>
<a href="rate.php?idP=<?php echo $idPK; ?>&rating=2"><img src="star.jpg" /></a>
<a href="rate.php?idP=<?php echo $idPK; ?>&rating=3"><img src="star.jpg" /></a>

    Make sure you get the rating from $_GET instead of $_POST though

  2. Use javascript (jquery in this example):

    <img src="star.gif" class="rating" rel="1" />
<img src="star.gif" class="rating" rel="1" />
<img src="star.gif" class="rating" rel="1" />

$('.rating').on('click', function() {
    $.post('rate.php?idP=<?php echo $idPK; ?>', {rating: $(this).attr('rel') }, function() { alert('rating saved'); }
});

  3. Be creative and post some code

giorgio
  • 10,111
  • 2
  • 28
  • 41