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

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

• javascript
• jquery
• html
• css

• 4 IDs have to be unique. You should create a <div class="rating_1">, and add the corresponding CSS style: .rating_1 {width:50px;height:50px;background:url("star1.png");}, for example. – Rob W Commented Jan 15, 2012 at 14:05
• 5 What CSS did you try? The solution is CSS, not JavaScript. – epascarello Commented Jan 15, 2012 at 14:17
• 1 Did you try: display: inline; on the div element? – Yaniro Commented Jan 15, 2012 at 14:27
• I did try display:inline on the div element. I created a new div element, tried different class. etc And the Ids are unique. – Dymond Commented Jan 15, 2012 at 14:45
• Maybe this question could be of help also: stackoverflow./questions/8804679/… – kontur Commented Jan 15, 2012 at 19:55

3 Answers 3

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/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./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./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:

float:left; display:inline; or display:inline block; are all your friends when trying to display in a straight horizontal line. I won't suggest using a <TABLE> for this but it can be done that way.

Maybe you should post some more of your code or create a JSFiddle of your HTML/CSS/Javascript

Update:

Created this: http://jsfiddle/Uyr4P/

It's just a copy/paste of your HTML with a display:inline-block style added for DIVs to illustrate how it is all in one line.

You will instead probably want to place a rule on your outermost DIVs and control the display that way - alternatively, use SPANs instead of DIVs

DIV solution. Just use this with your current HTML:

DIV#star DIV
{
 display:inline-block;
}

You should use CSS property "display" not on parent DIV, but on child ones, because it cannot be inherited. So, do something like this in CSS:

#star_1{display:inline block;}
#star_2{display:inline block;}
#star_3{display:inline block;}
#star_4{display:inline block;}
#star_5{display:inline block;}

or (better) declare CSS class for it