Placement aléatoire d'image sur clic

Signaler
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015
-
Messages postés
72
Date d'inscription
mercredi 27 décembre 2000
Statut
Membre
Dernière intervention
16 mai 2016
-
Bonjour,

je me mets tout juste à javascript et je bute sur un problème...

En fait, j'ai placé 3 photos dans des td et je veux que sur un clic sur une des photos, qu'elles se replacent aléatoirement.

Pour l'instant, j'essaye juste de placer la première photo choisie aléatoirement dans la première td, après j'utiliserai splice je pense et choisirai aléatoirement une des 2 autres photos puis re splice et affichage de la dernière.

Voici ce que j'ai fait et qui ne fonctionne pas :

<head>
<script language="JavaScript">

function mix() {
tbimage=new Array("photo0","photo1","photo2");
var imageAleatoire=Math.round(Math.random()*3);
document.getElementById("image0").rows[0].cells[0].appendChild(document.createElement('a')); document.getElementById("image0").rows[0].cells[0].lastChild.appendChild(document.createElement('img')); document.getElementById("image0").rows[0].cells[0].lastChild.lastChild.style.height="150px"; document.getElementById("image0").rows[0].cells[0].lastChild.lastChild.src='images/'+tbimage[imageAleatoire]+'.jpg';
}
</script>
</head>





,

,






</html>

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice

7 réponses

Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

J'ai avancé un peu mais ce n'est pas concluant car parfois des td sont vides, parfois on a 2 fois la même photo et je ne l'explique pas mais au 2° click, il me remet systématiquement les photos telles qu'elles sont au démarrage...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript">
function mix() {
var tbimage=new Array("d7","d7_02","d7_03");
for(i=0;i<3;i++){
var imageAleatoire=Math.round(Math.random()*tbimage.length);
document.getElementById("images").insertCell(0)
document.getElementById("images").cells[0].appendChild(document.createElement('a')).href='';
document.getElementById("images").cells[0].lastChild.appendChild(document.createElement('img'));
document.getElementById("images").cells[0].lastChild.lastChild.style.height="150px"
document.getElementById("images").cells[0].lastChild.lastChild.src='images/'+tbimage[imageAleatoire]+'.jpg'
tbimage.slice(imageAleatoire,imageAleatoire)
document.getElementById("images").deleteCell(3)
}
}
</script>
</head>



,
,





</html>


--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

apparemment slice ne fonctionne pas comme je l'avais compris, comment enlever une case d'un tableau?

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

Mon dernier essai, toujours le même problème de case parfois vide, j'ai modifié le code pour qu'il lance le chargement des images au début au lieu de les mettre en fixe :

<head>
<script language="JavaScript">
function mix0() {
tbimage=new Array("d7","d7_02","d7_03");
for(i=0;i<3;i++){ imagealeatoire=Math.round(Math.random()*tbimage.length);

document.getElementById("images").insertCell(0)
document.getElementById("images").cells[0].appendChild(document.createElement('a')).href='';
document.getElementById("images").cells[0].lastChild.appendChild(document.createElement('img'));
document.getElementById("images").cells[0].lastChild.lastChild.style.height="150px";
document.getElementById("images").cells[0].lastChild.lastChild.src='images/'+tbimage[imagealeatoire]+'.jpg';
tbimage.splice(imagealeatoire);
}
}

function mix() {
for(i=0;i<3;i++){
document.getElementById("images").deleteCell(0)
}
mix0();
}
</script>
</head>








</html>


Un peu d'aide serait la bienvenue, vous remerciant d'avance :)

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
Messages postés
72
Date d'inscription
mercredi 27 décembre 2000
Statut
Membre
Dernière intervention
16 mai 2016
1
Bonjour,

Je pense que les cases vides sont dus à Math.random() qui renvoie une valeur entre 0 et 1.
Donc 0 * 3(taille tableau) 0 et 1 * 3(taille tableau) 3 => 4 indices (0, 1, 2 et 3) possibles pour le tableau => case vide
Messages postés
112
Date d'inscription
lundi 6 avril 2009
Statut
Membre
Dernière intervention
17 janvier 2015

Il ne renvoie pas que 2 valeurs random, il renvoi un entier compris entre 0 et 1, que je multiplie par la longueur du tableau et que j'arrondi après

exemples :
si random =0.05 => imagealeatoire=arrondi(0.05*3)=arrondi(0.15)=0
si random =0.25 => imagealeatoire=arrondi(0.25*3)=arrondi(0.75)=1
si random =0.7 => imagealeatoire=arrondi(0.7*3)=arrondi(2.1)=2

Donc mon chiffre aléatoire sera bien compris entre 0 et 2

--------------------------------------------------------

http://www.projer.fr - dev web
http://www.lysdesign.fr - DA print / web - Illustratrice
Messages postés
72
Date d'inscription
mercredi 27 décembre 2000
Statut
Membre
Dernière intervention
16 mai 2016
1
Re,
De plus, apparemment la méthode splice écrase la tranche mais ne change pas les indices!
Donc il vaut peut-être mieux garder en mémoire les indices qui ont déjà été choisis. En passant par une table de hashage par exemple (http://weblogs.asp.net/ssadasivuni/archive/2003/09/17/27902.aspx) ou autre.
Messages postés
72
Date d'inscription
mercredi 27 décembre 2000
Statut
Membre
Dernière intervention
16 mai 2016
1
Re,

Il ne renvoie pas que 2 valeurs random, il renvoi un entier compris entre 0 et 1, que je multiplie par la longueur du tableau et que j'arrondi après

Oui, je sais j'ai pris les valeurs extrêmes pour l'exemple!


exemples :
si random =0.05 => imagealeatoire=arrondi(0.05*3)=arrondi(0.15)=0
si random =0.25 => imagealeatoire=arrondi(0.25*3)=arrondi(0.75)=1
si random =0.7 => imagealeatoire=arrondi(0.7*3)=arrondi(2.1)=2


Mais si random =0.9 => imagealeatoire=arrondi(0.9*3)=arrondi(2.7)=3!
Si je ne me trompe pas.