Vote avec images

**cerede2000** · 09/11/2006, 13h22

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

**SpaceFrog** · 09/11/2006, 13h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**cerede2000** · 09/11/2006, 13h43

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.

**Bisûnûrs** · 09/11/2006, 13h54

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.

**cerede2000** · 09/11/2006, 16h21

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

**Auteur** · 09/11/2006, 17h20

bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**cerede2000** · 09/11/2006, 17h42

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--
function etoilea(n)
{
 var i;
 for (i=1;i<=n;i++)
 {
   document.getElementById("etoile"+i).src = "jaune.gif";
 }
}
function etoilee(n)
{
 var i;
 for (i=1;i<=n;i++)
 {
   document.getElementById("etoile"+i).src = "grise.gif";
 }
}
 
//-->
</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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 09/11/2006, 21h42

Pas très élégant mais efficace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**cerede2000** · 09/11/2006, 21h59

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.

**Auteur** · 09/11/2006, 22h06

inverse l'appel des fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Vote avec images

JavaScript

Discussions similaires

Partager

Partager