Star ratings

[em1x]

Hi! I'm trying to write my own ajax star rating based on smarty plugin, but i still can't get over with JS.

I want to write a star rater that displays 5 stars.

- onmouseover on each star it lights up from 1 to X star (that works well)

but on `mouse out` from the rater it should return to its original score - that is the problem. I have a function that will recall the original ratings, but don't know how to connect it with my script..

if I do something like this:


<a onmouseout="alert('test')">
<img src="rate1.gif"><img src="rate2.gif"><img src="rate3.gif">
</a>


JS gives me alert on mouse out from every image inside the link :( i would like it to behave as one link, not three links. Then it would be simple:


<a onmouseout="myFunc()">
<!-- stars -->
</a>


(myFunc would recall original star rates)


anyone?

[PeejAvery]

HTML has reacted that way since the creation of "LiveScript." Any link that has multiple elements inside will return events for all three.

Personally, I would separate them anyway. Why bother with extra JavaScript for the changing of the stars when you can use CSS? Attached is the image with the stars.

<style type="text/css">
.rating{list-style: none; margin: 0px; padding: 0px; width: 80px; height: 16px; position: relative; overflow: hidden; background: url(stars.gif) top left repeat-x;}
.rating li{margin: 0px; padding: 0px; width: 16px; height: 16px; float: left;}
.rating li a{width: 16px; height: 16px; margin: 0px; padding: 0px; line-height: 16px; text-decoration: none; text-indent: -500px; z-index: 100; position: absolute; overflow: hidden;display: block; }
.rating li a:hover{background: url(stars.gif) left bottom; z-index: 99; left: 0px; border: none;}
.rating .one{left: 0px;}
.rating .one:hover{width: 16px;}
.rating .two{left: 16px;}
.rating .two:hover{width: 32px;}
.rating .three{left: 32px;}
.rating .three:hover{width: 48px;}
.rating .four{left: 48px;}
.rating .four:hover{width: 64px;}
.rating .five{left: 64px;}
.rating .five:hover{width: 80px;}
.rating .current{background: url(stars.gif) left; position: absolute; height: 16px; display: block; text-indent: -500px; z-index: 98;}
</style>

<ul class="rating">
<li class="current" style="width: 48px">Blah</li>
<li><a class="one" href="javascript:rate(1)">1</a></li>
<li><a class="two" href="javascript:rate(2)">2</a></li>
<li><a class="three" href="javascript:rate(3)">3</a></li>
<li><a class="four" href="javascript:rate(4)">4</a></li>
<li><a class="five" href="javascript:rate(1)">5</a></li>
</ul>

[em1x]

man that is absolutely fantastic work! :)

but it doesn't work on IE properly :(

[PeejAvery]

I'll take a look at it at work tomorrow when I am forced...*clears throat*...get to use my PC.

[PeejAvery]

Well, it turns out that there is no fix for the code I provided due to IE's lack of good CSS understanding.

Under the circumstances, I would suggest taking a look at this (http://mt-hacks.com/ajaxrating.html).

[em1x]

beautiful! thanks mate