Vote avec images

Version imprimable

09/11/2006, 13h22
cerede2000

Vote avec images

Bonjour,
Voila je veut realiser un systeme de vote sur mon site.
Le systeme en tant que tel ne pose aucun probleme, mais je veut en faite mettre des petites etoiles pour representer la note.
Et donc quand on va voter que selon ou on se trouve le nombre d'etoile s'allume en fonction de la note que l'on va attribuer.
Et je n'arrive pas a voir comment faire ceci.
Merci beaucoup ;)
09/11/2006, 13h30
SpaceFrog
on peut imaginer d'avoir une variable qui contient le nombre d'étoiles...

ensuite plusieurs possibilités, soit tu as autant d'images que d'étoiles
1ere image: 1star.jpg (une etoile)
2eme : 2star.jpg (deux étoiles)
etc ...

puis une balise img id= 'imgvote' dont tu détermines le src
Code:

1 2 3 var nbretoiles =2 document.getElementById('imgvote').src=nbretoiles+"star.jpg"
ou alors une seule image d'étoile et dans une boucle sur nbretoiles tu crées dynamiquement avec DOM des images sur la page ...

entre autres possibilités ...
09/11/2006, 13h43
cerede2000

Hum je craint que mon truc n'ai mal ete comprit.
En faite ce que je veut c'est donc on a par exemple 5 etoile grises sur la page, et quand on vient voter donc quand on est sur les etoiles grise, les etoiles de la premiere jusqu'a celle ou on se trouve devienne par exemple jaunes.
09/11/2006, 13h54
Bisûnûrs
Il te faut :
- 6 images (de 0 à 5 étoiles)
- un mapping (balise map/area)
- du mouseouver et mouseout
- faire des recherches avant de poster (http://developpez.net/forums/showthread.php?t=233377)
Bon courage.
09/11/2006, 16h21
cerede2000

Oui tout ca ca va, mais la ou je butte c pour faire que le nombre d'etoiles s'allume :(

bonjour,

crées :
- 5 etoiles jaunes : jaune1.jpg,...., jaune5.jpg ;
- 5 etoiles grises : grise1.jpg,...., grise5.jpg.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function etoile(n)
{
 var i;
 for (i=1;i<=n;i++)
 {
   document.getElementById("etoile"+i).src = "jaune" + i + ".jpg";
 }
}
 
//-->
</script>
 
</head>
 
<body>
 
<img id="etoile1" src="grise1.jpg" onclick="etoile(1)">
<img id="etoile2" src="grise2.jpg" onclick="etoile(2)">
<img id="etoile3" src="grise3.jpg" onclick="etoile(3)">
<img id="etoile4" src="grise4.jpg" onclick="etoile(4)">
<img id="etoile5" src="grise5.jpg" onclick="etoile(5)">
 
</body>
 
</html>

Ah oui! Merci beaucoup!
Voila ce que ca donne un peu modifier pour faire ce que je voulais:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <img id="etoile1" src="grise.gif" onclick="etoilea(1)" onmouseover="etoilea(1)" onmouseout="etoilee(1)"/> <img id="etoile2" src="grise.gif" onclick="etoilea(2)" onmouseover="etoilea(2)" onmouseout="etoilee(2)"/> <img id="etoile3" src="grise.gif" onclick="etoilea(3)" onmouseover="etoilea(3)" onmouseout="etoilee(3)"/> <img id="etoile4" src="grise.gif" onclick="etoilea(4)" onmouseover="etoilea(4)" onmouseout="etoilee(4)"/> <img id="etoile5" src="grise.gif" onclick="etoilea(5)" onmouseover="etoilea(5)" onmouseout="etoilee(5)"/> </body> </html>
Mais en faite j'ai un petit probleme entre deux images j'ai un trou et ce n'est pas top car du coup ca fait sauter le truc essayer vous verrez.
Comment eviter cela?

Et egalement comment faire pour qu'un foit qu'on a cliquer il ne se passe plus rien quand on va sur les etoiles. Car j'ai essayer ceci:
Code:

1 2 document.getElementById("etoile"+i).onmouseover = ""; document.getElementById("etoile"+i).onmouseover = "";
Mais ca ne donne pas grand chose ca ne marche qu'a moitier :(

Merci

Pas très élégant mais efficace :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
flag = new Array(false, false, false, false, false);
function Clic(n)
{
 flag[n-1] = true;
}
 
function etoilea(n)
{
 var i;
 if (!flag[n-1])
 {
   for (i=1;i<=n;i++)
   {
     document.getElementById("etoile"+i).src = "jaune.gif";
   }
 }
}
 
function etoilee(n)
{
 var i;
 if (!flag[n-1])
 {
   for (i=1;i<=n;i++)
   {
     document.getElementById("etoile"+i).src = "grise.gif";
   }
 }
}
 
//-->
</script>
 
</head>
 
<body>
 
<img id="etoile1" src="grise.gif" onclick="Clic(1); etoilea(1)" onmouseover="etoilea(1)" onmouseout="etoilee(1)"/>
<img id="etoile2" src="grise.gif" onclick="Clic(2); etoilea(2)" onmouseover="etoilea(2)" onmouseout="etoilee(2)"/>
<img id="etoile3" src="grise.gif" onclick="Clic(3); etoilea(3)" onmouseover="etoilea(3)" onmouseout="etoilee(3)"/>
<img id="etoile4" src="grise.gif" onclick="Clic(4); etoilea(4)" onmouseover="etoilea(4)" onmouseout="etoilee(4)"/>
<img id="etoile5" src="grise.gif" onclick="Clic(5); etoilea(5)" onmouseover="etoilea(5)" onmouseout="etoilee(5)"/>
 
</body>
 
</html>

09/11/2006, 21h59
cerede2000

Eu j'ai tester ca fait comme avec ma methode.
Ca ne marche qu'a moitier :(
Et reste toujours le probleme des espace entre les images.
09/11/2006, 22h06
Auteur
inverse l'appel des fonctions :
Code:

1 2 3 4 5 onclick="etoilea(1); Clic(1)" onclick="etoilea(2); Clic(2)" onclick="etoilea(3); Clic(3)" ...
pour ce qui est des espaces je crois que l'ajout d'un doctype peut résoudre le problème