Σύστημα αξιολόγησης θεμάτων

Υπενθύμιση αρχικής δημοσίευσης :

Θέλω να κάνω ένα σύστημα αξιολόγησης για τα θέματα στην σελίδα μου. Θέλω δηλαδή αν γίνεται, να μπει ένα κουτάκι όπως το + και το - που υπάρχει και να είναι άδειο και οι διαχειριστές να μπορούν να καταχωρήσουν κάποιο αριθμό μέσα σε αυτό! Γίνεται?

Αν δεν καταλάβατε πείτε μου να σας στήλω αναλυτικά τι θέλω με εικόνες.

Html

Κώδικας:

<ul class='star-rating'>
   <li class='current-rating' id='current-rating' style="width: 37px"></li>
   <li><a href="#" onclick="vote(1); return false;"
          title='1 star out of 5' class='one-star'>1</a></li>
   <li><a href="#" onclick="vote(2); return false;"
          title='2 star out of 5' class='two-stars'>2</a></li>
   <li><a href="#" onclick="vote(3); return false;"
          title='3 star out of 5' class='three-stars'>3</a></li>
   <li><a href="#" onclick="vote(4); return false;"
          title='4 star out of 5' class='four-stars'>4</a></li>
   <li><a href="#" onclick="vote(5); return false;"
          title='5 star out of 5' class='five-stars'>5</a></li>
</ul>
<div id='current-rating-result'></div>

Css

Κώδικας:

.star-rating{
      list-style:none;
      margin-left:5px !important;
      padding:0px;
      width: 125px;
      height: 25px;
      position: relative;
      background: url(/images/alt_star.gif) top left repeat-x;      
   }
   .star-rating li{
      padding:0px;
      margin:0px;
      /**/
      float: left;
      /* */
   }
   .star-rating li a{
      display:block;
      width:25px;
      height: 25px;
      text-decoration: none;
      text-indent: -9000px;
      z-index: 20;
      position: absolute;
      padding: 0px;
   }
   .star-rating li a:hover{
      background: url(/images/alt_star.gif) left bottom;
      z-index: 2;
      left: 0px;
   }
   .star-rating a:focus,
   .star-rating a:active{
      border:0;   
      -moz-outline-style: none;
               outline: none;
   }
   .star-rating a.one-star{
      left: 0px;
   }
   .star-rating a.one-star:hover{
      width:25px;
   }
   .star-rating a.two-stars{
      left:25px;
   }
   .star-rating a.two-stars:hover{
      width: 50px;
   }
   .star-rating a.three-stars{
      left: 50px;
   }
   .star-rating a.three-stars:hover{
      width: 75px;
   }
   .star-rating a.four-stars{
      left: 75px;
   }   
   .star-rating a.four-stars:hover{
      width: 100px;
   }
   .star-rating a.five-stars{
      left: 100px;
   }
   .star-rating a.five-stars:hover{
      width: 125px;
   }
   .star-rating li.current-rating{
      background: url(/images/alt_star.gif) left center;
      position: absolute;
      height: 25px;
      display: block;
      text-indent: -9000px;
      z-index: 1;
   }
   

Javascript θα το βαλεις στο html

Κώδικας:

<script language="javascript">
function vote(amnt){
   $.ajax({
      type: "POST",
      url: "/path/to/vote/handler.php",
      data: "item_id=12345&vote=" amnt,
      dataType: "json",
      success: function(res){
         $('#current-rating').width(res.width);
         $('#current-rating-result').html(res.status);
      }
   });
}
</script>

Θα κάνω δύο Html δλδ?

θα τα βαλεις σε ενα πρωτυπο...

Δηλαδή θα κάνω νέο στα Html και θα βαλω και τα δυο μαζί? Ή πρέπει να τα βαλω σε πρότυπο του φόρουμ?

θα το βαλεις σε προτυπο του φορουμ και στην συνεχεια απο το css θα το βαλεις σε οποιο σημειο θελεις

Δηλαδή αυτά που λέει HMTL μπαίνουν στα πρότυπα του φόρουμ??

ναι...

Το έκανα αλλά δεν φαίνεται τίποτα..

Για την εικόνα ποιό πρέπει να βάλω? Επειδή γράφει για τα αστέρια αλλά δεν φαίνεται τίποτα.

Σίγουρα θα ήταν πολύ πιο εύκολο να επιτευχθεί κάτι τέτοιο εάν η forumotion μας επέτρεπε την πρόσβαση στην php των συζητήσεων μας.

Ναι μα τώρα αυτό που μου έδειξε ο Παύλος δεν δουλεύει!! Τι μπορώ να κάνω? Προφανώς είναι η εικόνα που λείπε.. Αλλά που μπορώ να βρω εικόνα ανάλογη?
mmmeil

Μάριος έγραψε:Για την εικόνα ποιό πρέπει να βάλω? Επειδή γράφει για τα αστέρια αλλά δεν φαίνεται τίποτα.

Tο css είναι διαμορφομένο έτσι ώστε η εικόνα με τα αστεράκια να ανεβαίνει στον sevrer του website.
Απλά θα κάνουμε την εικόνα copy από εκείνο to site, αντί να την κατεβάσουμε και να την ξανανεβάσουμε σε κάποιο server.
Δοκίμασε αυτό για το css

Κώδικας:

  .star-rating{
      list-style:none;
      margin-left:5px !important;
      padding:0px;
      width: 125px;
      height: 25px;
      position: relative;
      background: url('http://dtbaker.net/webimages//alt_star.gif') top left repeat-x;      
   }
   .star-rating li{
      padding:0px;
      margin:0px;
      /**/
      float: left;
      /* */
   }
   .star-rating li a{
      display:block;
      width:25px;
      height: 25px;
      text-decoration: none;
      text-indent: -9000px;
      z-index: 20;
      position: absolute;
      padding: 0px;
   }
   .star-rating li a:hover{
      background: url('http://dtbaker.net/webimages//alt_star.gif') left bottom;
      z-index: 2;
      left: 0px;
   }
   .star-rating a:focus,
   .star-rating a:active{
      border:0;   
      -moz-outline-style: none;
               outline: none;
   }
   .star-rating a.one-star{
      left: 0px;
   }
   .star-rating a.one-star:hover{
      width:25px;
   }
   .star-rating a.two-stars{
      left:25px;
   }
   .star-rating a.two-stars:hover{
      width: 50px;
   }
   .star-rating a.three-stars{
      left: 50px;
   }
   .star-rating a.three-stars:hover{
      width: 75px;
   }
   .star-rating a.four-stars{
      left: 75px;
   }   
   .star-rating a.four-stars:hover{
      width: 100px;
   }
   .star-rating a.five-stars{
      left: 100px;
   }
   .star-rating a.five-stars:hover{
      width: 125px;
   }
   .star-rating li.current-rating{
      background: url('http://dtbaker.net/webimages//alt_star.gif') left center;
      position: absolute;
      height: 25px;
      display: block;
      text-indent: -9000px;
      z-index: 1;
   }

Γιώργο αυτό έκανα αλλά η εικόνα το εμφανίζει με 1 αστέρι και μισό από την αρχή και όταν προσπαθήσω να προσθέσω αστέρι με παίρνει στην κορυφή χωρίς να κάνει κάποια αλλαγή..

Μπορεί να κλειδώσει! Λύθηκε!