1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:53 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Needed to fill 5 stars

         

orion_rus

10:08 am on Feb 26, 2005 (gmt 0)

10+ Year Member



Hello world i have a rating system. And it should seems like so:
Then user rate a hotel he see 5 stars. Then he mouseovers to any stars (let it be number 4) all previous and this star is filled with grey (4 stars filled with grey) and another remain unfilled (1 star transparent). Then user click on it all selected stars (4 stars) filled with red and rating is placed near it (rating would be 4).
May be any ideas how to make it? (I have 5 such rating systems in one page.)
Thank you very much

SpaceFrog

10:20 am on Feb 28, 2005 (gmt 0)

10+ Year Member



just have two images, one of a filled star, one of an empty star...
you would just have to play on img src to change from an empty star to a full star ...

orion_rus

12:43 pm on Feb 28, 2005 (gmt 0)

10+ Year Member



But how i can get them all and play with their sources? ih i have 5 array of it?

SpaceFrog

12:54 pm on Feb 28, 2005 (gmt 0)

10+ Year Member



just make your self two pictures and roll on with this : 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Five Star</title>
<script>
function fillstar(Obj){
var stars=document.getElementsByName('star')
for(i=0;i<stars.length;i++){
if (i<=Obj.id){stars[i].src="fullstar.jpg"}
else{stars[i].src="emptystar.jpg"}
}
}
</script>
</head>
<body>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="star" id="4" onmouseover="fillstar(this)" />
</body>
</html>

[edited by: SpaceFrog at 12:58 pm (utc) on Feb. 28, 2005]

SpaceFrog

12:56 pm on Feb 28, 2005 (gmt 0)

10+ Year Member



only point you would need a reset button for no star at all...

tell me exactly what you need

orion_rus

1:11 pm on Feb 28, 2005 (gmt 0)

10+ Year Member



Yes) but i need about 5 arrays (25 stars) may be any unique method?)

SpaceFrog

1:23 pm on Feb 28, 2005 (gmt 0)

10+ Year Member 




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script>
function fillstar(Obj){
var stars=document.getElementsByName(Obj.name)
for(i=0;i<stars.length;i++){
if (i<=Obj.id){stars[i].src="fullstar.jpg"}
else{stars[i].src="emptystar.jpg"}
}
}
</script>
<style type='text/css'>
img {height:30px;width:30px;}
</style>
</head>
<body>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="star" id="4" onmouseover="fillstar(this)" />
<br/>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="1star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="1star" id="4" onmouseover="fillstar(this)" />
<br/>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="2star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="2star" id="4" onmouseover="fillstar(this)" />
<br/>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="3star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="3star" id="4" onmouseover="fillstar(this)" />
<br/>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="4star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="4star" id="4" onmouseover="fillstar(this)" />
<br/>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="5star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="5star" id="4" onmouseover="fillstar(this)" />
<br/>
</body>

orion_rus

3:21 pm on Feb 28, 2005 (gmt 0)

10+ Year Member



It's not an unique method) I think about firstChild, lastChild, childNodes)
Thank you very much for solving this problem.

SpaceFrog

3:27 pm on Feb 28, 2005 (gmt 0)

10+ Year Member



you're welcome... ;-)
it was my pleasure!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:53 am May 14, 2026