Question

I just created a star rating system that change image on mouse over., but i cant seem to display the stars inline.
they get under each other.
It dosent work with style sheet so I suppose it should be re written in the javascript. !?

This is my JavaScript function.

html code :

<div id="star">
<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star2.png" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>
<div id="star_2" onclick="SendRating(2);" onmouseover="rateStar(2)" >
<img src="star2.png" id="rating_2" onclick="SendRating(this.getAttribute('score'));" alt="star_2" /></div>
<div id="star_3" onclick="SendRating(3);" onmouseover="rateStar(3)" >
<img src="star2.png" id="rating_3" onclick="SendRating(this.getAttribute('score'));" alt="star_3" /></div>
<div id="star_4" onclick="SendRating(4);" onmouseover="rateStar(4)" >
<img src="star2.png"  id="rating_4" onclick="SendRating(this.getAttribute('score'));" alt="star_4" /></div>
<div id="star_5" onclick="SendRating(5);" onmouseover="rateStar(5)" >
<img src="star2.png"  id="rating_5" onclick="SendRating(this.getAttribute('score'));" alt="star_5" /></div>


<p id="ContentHolder">

</p>
</div>

JavaScript :

function rateStar(rating){
        var i = 1;
        var ratings = '';
        for (i==1; i<=5; i++){
            if (i<=rating){
                document.getElementById('rating_'+i).src= 'star1.png';
            }
            else{
                document.getElementById('rating_'+i).src= 'star.jpg';
            }
        }
 }

and one of my divs

<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star.jpg" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>

CSS

#star{
position:absolute;
color:#fff;
margin-top:100px;
margin-left:1000px;
display:inline block;

}

the mouse over function is working great except that it wont display inline =/
Thanks

Answer 1

Using display: inline-block; on your stars will fix the problem. You can do the whole hover effect using CSS without any Javascript.

Demo: http://jsfiddle.net/ThinkingStiff/5JPDX/

HTML:

<div id="stars">
    <div id="star-1" class="star"></div>
    <div id="star-2" class="star"></div>
    <div id="star-3" class="star"></div>
    <div id="star-4" class="star"></div>
    <div id="star-5" class="star"></div>
</div>

CSS:

#stars {
    background-image: url( http://thinkingstiff.com/images/star-empty.gif );
    background-size: 20px 20px;
    cursor: pointer;
    height: 20px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

.star {
    height: 20px;
    position: absolute;
    width: 100px;
}

.star:hover {
    background-image: url( http://thinkingstiff.com/images/star-highlight.png );
    background-size: 20px 20px;
}

#star-1 {
    right:  80px;
    z-index: 5;
}

#star-2 {
    right:  60px;    
    z-index: 4;
}

#star-3 {
    right:  40px;    
    z-index: 3;
}

#star-4 {
    right:  20px;    
    z-index: 2;
}

#star-5 {
    right:  0;    
    z-index: 1;
}

Script:

document.getElementById( 'stars' ).addEventListener( 'click', function ( event ) {

    //SendRating( event.target.id.substr( -1 ) );
    alert( event.target.id.substr( -1 ) );

}, false );

Output: