Jump to content
Sign in to follow this  

star rating system

Recommended Posts

I wanted to make a star rating system but my code is not working. Can anyone help me please? i couldn't figure out why the star is not changing while hover it.

1.0-star.png is white while 0.5-star.png is golden.


Here is the code..


function setRating(number){
jquery('#main').css('background', 'url(images/'+number+'-star.png) no-repeat')
function saveRating(number){
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="main" style="background:url(images/1.0-star.png) no-repeat;">
<div class="rating" onmouseover="setRating('0.5')" onclick="saveRating('0.5');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('1.0')" onclick="saveRating('1.0');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('1.5')" onclick="saveRating('1.5');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('2.0')" onclick="saveRating('2.0');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('2.5')" onclick="saveRating('2.5');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('3.0')" onclick="saveRating('3.0');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('3.5')" onclick="saveRating('3.5');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('4.0')" onclick="saveRating('4.0');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('4.5')" onclick="saveRating('4.5');" onmouseout="setRating('1.0')"></div>
<div class="rating" onmouseover="setRating('5.0')" onclick="saveRating('5.0');" onmouseout="setRating('1.0')"></div>

Share this post

Link to post
Share on other sites

Looking over your code I see a few errors, specifically the attr() function doesn't run strings as an eval() (even if it did that is definitely not the way to do it). I can go over and run a few corrections on your javascript to get it running smoothly.

<head>    <style>      #main{        background-image:url('images/10-star.png');        background: no-repeat;      }      #main.star05{background-image:url('images/05-star.png')}      #main.star10{background-image:url('images/10-star.png')}      #main.star15{background-image:url('images/15-star.png')}      #main.star20{background-image:url('images/20-star.png')}      #main.star25{background-image:url('images/25-star.png')}      #main.star30{background-image:url('images/30-star.png')}      #main.star35{background-image:url('images/35-star.png')}      #main.star40{background-image:url('images/40-star.png')}      #main.star45{background-image:url('images/45-star.png')}      #main.star50{background-image:url('images/50-star.png')}      /********************************************      notice I defined the hover classes after the star classes      this way they will have higher priority than the previous       group if #main has both classes since the hover classes      are the last ones listed at the same specificity level (ID + classname)      ********************************************/      #main.hover_star05{background-image:url('images/05-star.png')}      #main.hover_star10{background-image:url('images/10-star.png')}      #main.hover_star15{background-image:url('images/15-star.png')}      #main.hover_star20{background-image:url('images/20-star.png')}      #main.hover_star25{background-image:url('images/25-star.png')}      #main.hover_star30{background-image:url('images/30-star.png')}      #main.hover_star35{background-image:url('images/35-star.png')}      #main.hover_star40{background-image:url('images/40-star.png')}      #main.hover_star45{background-image:url('images/45-star.png')}      #main.hover_star50{background-image:url('images/50-star.png')}    </style>    <!-- Remember, always put script tags after style tags -->    <script src="http://ajax.googleap...1/jquery.min.js"></script>    <script>      $("#main span").hover(          function (){//handler to do while hovering over span            //"$(this) will refer to span element while inside each handler function            // .parent() tells to move the selection from the current span to the span's parent            //           ( the #main)            // .addClass() will be adding the temporary hover class to the #main            $(this).parent()                   .addClass("hover_"+$(this).attr('class'));          },          function (){//handler to do when you leave span            //very similar to the mouseenter handler, just removes that same hover class            $(this).parent()                   .removeClass("hover_"+$(this).attr('class'));          }      ).click(          function(){//now the handler when you click on a span            //this one removes all classes from #main, including any hover classes            // then adds the class with the rating you want to be set.            $(this).parent()                   .removeClass()                   .addClass($(this).attr('class'));          }      );    </script>  </head>  <body>    <div id="main">      <span class="star05"></span>      <span class="star10"></span>      <span class="star15"></span>      <span class="star20"></span>      <span class="star25"></span>      <span class="star30"></span>      <span class="star35"></span>      <span class="star40"></span>      <span class="star45"></span>      <span class="star50"></span>    </div>  </body></html>
I made quite a few changes to your code with some optimizations.Sorry to say, I being pulled away from my PC to help someone move so I haven't been able to test the code yet nor will I be back to answer any questions you may have about it until tonight, but hopefully I can just post what I have here and others on the forum can pick up where I left off and help any mistakes I've made or answer any questions you have. I just thought I should post straight away to help steer you in the right direction.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...