2

Is there a way to implement a 5-star rating control, that supports changing the images of the 5 stars upon hover, without the use of Javascript? A click would need to perform a HTTP POST

To get a better understanding I searched for a sample and found http://orkans-tmp.22web.net/star_rating/ (Scroll to "Quick example with SELECT options")

As far as my knowledge of HTML goes, it is not possible to have multiple images / buttons that perform a Post (to know which rating was given by the user), and simultaneously change multiple background images.

Jon Adams
  • 24,464
  • 18
  • 82
  • 120
citronas
  • 19,035
  • 27
  • 96
  • 164

3 Answers3

1

Here is an example from CSS3 Secrets

jsfiddle

You can use css selectors to get what you want done without javascript.

Caleb Doucet
  • 1,751
  • 2
  • 14
  • 29
0

You can change the image using CSS. Just apply a class and give it the :hover option.

i.e. .star:hover { color:blue; }

I assume that you would want all previous stars to change color as well on hover, this would be possible, but quite difficult. We'll start with an image of 5 starts (all highlighted) and an image of a single unhighlighted start. Place five of the unhighlighted starts right on top of each other (set the absolute postion). Adjust the intend of the stars so that each is indented more than the last and they are laid out properly (without actually overlapping each other). Add a CSS on hover that's different for each one. It will need to replace the image with the 5 stared highlighted image. The width will need to be set so that only the appropriate number of stars is shown. The z-index will need to be set so that it is on top of the unhighlighted images of all previous stars.

Servy
  • 202,030
  • 26
  • 332
  • 449
  • You're a ninja. Nothing to see here. – Josh Darnell Feb 08 '12 at 15:31
  • my guess is that he'll want all previous stars to change color too, while still being separate entities. That complicates matters though. – Servy Feb 08 '12 at 15:33
  • Yes I know I can change one image using css. But my question was how to change multiple images (as I've stated, I don't think that's possible) or how use another technique to achieve the same – citronas Feb 08 '12 at 15:37
  • @Servy: Yes, that's exactly what I'm trying to do – citronas Feb 08 '12 at 15:38
-1

Is it possible 2 use the OnMouseOver and OnMouseOut option to create the same effect of a hover?

ASP
  • 3,645
  • 1
  • 31
  • 45
Zubair karan
  • 1