• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1288
  • Last Modified:

Star rating system, vb.net and/or javascript

I'm trying to do a rating system like the one that rates movies on blockbuster.com. I'm doing a .net application and want to use the stars as image buttons and when the image button is clicked have some database interactivity happen. My problem is the mousover issue. I'm currently using the .Attributes("onmouseover") to highlight the star that I am on. But let's say someone hovers over the fourth start, I want stars one through four to highlight. How do I make this happen? Do I need a combination of javascript and vb.net? Please help!
0
jrmcintosh
Asked:
jrmcintosh
  • 4
  • 2
1 Solution
 
Cyber-DrugsCommented:
After doing a quick google, I found this for you:

http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/

It is designed for MySQL/PHP, but I'm certain you can just swap the PHP for .NET code.
0
 
Cyber-DrugsCommented:
0
 
jrmcintoshAuthor Commented:
This really isn't exactly what I want but thanks for the links.

To be more specific I have coded basically what I want but want the ability to change multiple imagebutton images based on what imagebutton is hovered over. I don't know if I can do this via .net/javascript or what.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Cyber-DrugsCommented:
Sounds like JavaScript to me, example:


<script>
function showStars(str) {
if (str == 1)
{
getElementById('star_1').src = 'star_on.jpg';
} else if (str == 2)
{
getElementById('star_1').src = 'star_on.jpg';
getElementById('star_2').src = 'star_on.jpg';
}
}

function hideStars(str) {
if (str == 1)
{
getElementById('star_1').src = 'star_off.jpg';
} else if (str == 2)
{
getElementById('star_1').src = 'star_off.jpg';
getElementById('star_2').src = 'star_off.jpg';
}
}
</script>
0
 
Cyber-DrugsCommented:
onMouseOver=showStars(1)
onMouseOff=hideStars(1)
0
 
jrmcintoshAuthor Commented:
I'm not very good with javascript but here is my code, I haven't been able to get it to work. I would also like to do this with <input type=image>'s. Is this possible?

<script>
function showStars(str) {
if (str == 1)
{
getElementById('star_1').src = 'images/lil_boxing_glove.gif';
} else if (str == 2)
{
getElementById('star_1').src = 'images/lil_boxing_glove.gif';
getElementById('star_2').src = 'images/lil_boxing_glove.gif';
}
}

function hideStars(str) {
if (str == 1)
{
getElementById('star_1').src = 'images/no_boxing_glove.gif';
} else if (str == 2)
{
getElementById('star_1').src = 'images/no_boxing_glove.gif';
getElementById('star_2').src = 'images/no_boxing_glove.gif';
}
}
</script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0">
 
<tr>  
   <td><img name="star_1" onMouseOut="hideStars(1);" onMouseOver="showStars(1);" src="images/no_boxing_glove.gif" width="20" height="30" border="0">
   </td>
   <td><img name="star_2" onMouseOut="hideStars(2);" onMouseOver="showStars(2);" src="images/no_boxing_glove.gif" width="20" height="30" border="0">
   </td>  
</tr>
</table>

</body>
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now