Image change on mouse over

[daveh33]

I am writing a 5-star rating script and trying to get mouse over images to work.

 

I have my 5 stars for the user to click: -

 

<a href=\"#\" onclick=\"document.comment.rating.value='1'; return false;\"><img src=\"star01.gif\" border=\"0\" /></a> 
<a href=\"#\" onclick=\"document.comment.rating.value='2'; return false;\"><img src=\"star01.gif\" border=\"0\" /></a> 
<a href=\"#\" onclick=\"document.comment.rating.value='3'; return false;\"><img src=\"star01.gif\" border=\"0\" /></a> 
<a href=\"#\" onclick=\"document.comment.rating.value='4'; return false;\"><img src=\"star01.gif\" border=\"0\" /></a> 
<a href=\"#\" onclick=\"document.comment.rating.value='5'; return false;\"><img src=\"star01.gif\" border=\"0\" /></a> 

 

This sets the value of the hidden field no problem.

 

When the user clicks a star (e.g 4) I would like the first 4 stars image source to change - if anyone can help me with this it is much appreciated.

 

Thanking you in advanced!

[ohdang888]

this should be posted in the javascript forum. Please don't post javascript questions in the php forum.

 

 

nevertheless,

you would set an id attribute on the img tags, like "star_1", etc., then you would create a function that has this in it

 

document.getElementById('star_1').src = "the new url";

 

and do that for all of the stars with lower numbers than the one clicked

[Ken2k7]

You don't need JavaScript.

 

For easier transition, make both images (the mouse over one and the default) and have a CSS hover update the CSS positioning of the image. Confused? Well, it's like this - make one image, put the default at the top and the hover over on the bottom. When you display it, have CSS display just the top one. Then using CSS's hover selector, change the positioning to display the bottom one. It has a cleaner effect then using JavaScript because the image is already loaded rather than having the browser load an image, which can be laggy.

[ohdang888]

You don't need JavaScript.

 

For easier transition, make both images (the mouse over one and the default) and have a CSS hover update the CSS positioning of the image. Confused? Well, it's like this - make one image, put the default at the top and the hover over on the bottom. When you display it, have CSS display just the top one. Then using CSS's hover selector, change the positioning to display the bottom one. It has a cleaner effect then using JavaScript because the image is already loaded rather than having the browser load an image, which can be laggy.

 

well is it possible to change 4 other stars at the same time while hovering over just one star???

 

for example, if you hovered over image 4, image 1,2,3, AND 4 would have to change. Is that possible?

[Ken2k7]

well is it possible to change 4 other stars at the same time while hovering over just one star???

 

for example, if you hovered over image 4, image 1,2,3, AND 4 would have to change. Is that possible?

Yup! You don't need JavaScript. When I did my article rating system, I used all CSS and xHTML for it. It was a little excessive and would be simpler with JavaScript, but I chose not to use JavaScript.

[ohdang888]

how is that done? i'm assuming with a large number of spans or divs, and did the on hover on those???

[Ken2k7]

Not much. About 6 DIVs total.

[Axeia]

http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/

If you typing in "css rating" it actually suggests "css rating stars"

[Ken2k7]

F-ing hot huh!? Use JavaScript and you get very buggy mouseovers where CSS === speed and sexiness! Yeah, I didn't create mine like that, but I still love my own little accomplishment. It was done a few years back when I didn't know that much.