Solved

Star rating system, vb.net and/or javascript

Posted on 2007-03-25
6
1,201 Views
Last Modified: 2012-06-22
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
Comment
Question by:jrmcintosh
  • 4
  • 2
6 Comments
 
LVL 4

Expert Comment

by:Cyber-Drugs
Comment Utility
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
 
LVL 4

Expert Comment

by:Cyber-Drugs
Comment Utility
0
 

Author Comment

by:jrmcintosh
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 4

Accepted Solution

by:
Cyber-Drugs earned 500 total points
Comment Utility
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
 
LVL 4

Expert Comment

by:Cyber-Drugs
Comment Utility
onMouseOver=showStars(1)
onMouseOff=hideStars(1)
0
 

Author Comment

by:jrmcintosh
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now