script image aléatoire ?

**chris241182** · 03/08/2010, 11h25

Salut à tous
je viens vers vous car je pense que vous êtes mon dernier espoir...
voila mon site
http://www.fm-design.net

sur le coté droit, là ou il y a l'image Brian baloyi, j'aimerais qu'une image au hasard s'affiche. Toutes mes images se trouvent dans le dossier suivant :
../faces/hasard_test/
et se nomment 1.jpg, 2.jpg, 3.jpg, 4.jpg et 5.jpg.
Elle font toutes la meme taille, 140x180px.

j'ai fouillé sur le net, j'ai trouvé des scripts mais aucun en fonctionne...
1) est-ce qu'un test en local de mes pages suffisent pour voir si le script fonctionne ou dois-je obligatoirement les envoyer sur mon ftp ?
2) si quelqu'un peut me donner un code pas trop complexe, facilement modifiable et compréhensible, ce serait hyper cool...

voila merci d'avance
chris

**gael** · 03/08/2010, 11h34

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
 
nb_img = 100 ;
img_number_rand= Match.floor( nb_img * Math.rand() );
document.getElementById('ID.IMAGE').src= "../faces/hasard_test/"+ img_number + ".jpg";
 
</script>

**chris241182** · 03/08/2010, 11h36

Envoyé par gael

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
 
nb_img = 100 ;
img_number_rand= Match.floor( nb_img * Math.rand() );
document.getElementById('ID.IMAGE').src= "../faces/hasard_test/"+ img_number + ".jpg";
 
</script>

merci beaucoup pour ta réponse.
nb_img = 100 >>>> je dois mettre le nombre total d'images ici je pense ?
et aprés je touche plus a rien d'autre ?
et ce code, je le colle exactement à l'endroit ou je peux placer l'image ?

**gael** · 03/08/2010, 11h41

Oui mais ça ne marchera bien que s'il y a toutes les images.

Au passage, ça serait surement mieux de faire ce choix sur le serveur.

**chris241182** · 03/08/2010, 11h43

j'ai mis tout ca en ligne mais rien ne d'affiche... si tu peux aller voir ce qui ne va pas...
merci en tout cas pour ton aide

**gael** · 03/08/2010, 11h45

et ce code, je le colle exactement à l'endroit ou je peux placer l'image ?

déjà il y a une erreur: il faut remplacer img_number par img_number_rand dans la 3è ligne.
Et sur cette ligne il faut aussi remplacer ID.IMAGE par l'ID de la balise img dans laquelle tu veux mettre l'image aléatoire.
Tu colles tout le bloc après ton image.

**chris241182** · 03/08/2010, 11h47

Envoyé par gael

déjà il y a une erreur: il faut remplacer img_number par img_number_rand dans la 3è ligne.
Et sur cette ligne il faut aussi remplacer ID.IMAGE par l'ID de la balise img dans laquelle tu veux mettre l'image aléatoire.
Tu colles tout le bloc après ton image.

j'ai corrigé pour img_number_rand
par contre pour l'id de la balise img, je vois pas du tout a quoi ca correspond...

**gael** · 03/08/2010, 11h58

Pour pouvoir identifier les balises dans le document, on peut ajouter un attribut id (== identifiant) à n'importe quelle balise. Un identifiant doit être unique dans tous le document.

Ensuite, si tu as besoin d'obtenir le codecontenu dans la balise dont l'id est contenu, tu écriras: document.getElementById('contenu').innerHTML.

De même, pour modifier l'attribut src de la balise img dans laquelle tu va mettre ta photo aléatoire et qui aura par exemple image-aleatoire comme id , tu vas faire:

document.getElementById('image-aleatoire').src = ....

**chris241182** · 03/08/2010, 12h02

Envoyé par gael

Pour pouvoir identifier les balises dans le document, on peut ajouter un attribut id (== identifiant) à n'importe quelle balise. Un identifiant doit être unique dans tous le document.

Ensuite, si tu as besoin d'obtenir le codecontenu dans la balise dont l'id est contenu, tu écriras: document.getElementById('contenu').innerHTML.

De même, pour modifier l'attribut src de la balise img dans laquelle tu va mettre ta photo aléatoire et qui aura par exemple image-aleatoire comme id , tu vas faire:

document.getElementById('image-aleatoire').src = ....

oula pas facile pour un méga débutant comme moi lol
alors j'ai commencé par nommer l'ID comme tu as fais : image-aleatoire.
par contre pour attribuer l'id a la balise et pour le codecontenu j'ai rien compris... lol
Je suis désolé mais je suis un peu boulet sur l'affaire donc si tu peux m'expliquer plus "simplement" si c'est possible bien sur...
si tu peux carrément me dire quoi mettre dans mon code que tu peux récupérer sur ma page...
merci encore de prendre du temps pour m'expliquer

**gael** · 03/08/2010, 12h11

Tu as juste à écrire ta balise comme ceci:

<img id="image-aleatoire" />

**chris241182** · 03/08/2010, 12h15

Envoyé par gael

Tu as juste à écrire ta balise comme ceci:

<img id="image-aleatoire" />

ok et j'insère cette balise à l'intérieur du script ou a l'extérieur ?
je l'ai mis juste avant le script ca me marche pas, ca doit pas pas être ca...
c'est en ligne si tu veux aller voir

**chris241182** · 03/08/2010, 12h29

aie gael est partit si quelqu'un peut me sauver...
je ne sais pas ou placer la balise img

**gael** · 03/08/2010, 13h32

Ma connexion a été coupée pendant que j'écrivais ce message:

Code :

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

1
2
3
4
5
6
7
8
9
10
<img id="image-aleatoire"/>
  
<script type="text/javascript"> 
 
nb_img = 5 ;
img_number_rand= Match.floor( nb_img * Math.rand() );
document.getElementById('image-aleatoire').src= "../faces/hasard_test/"+ img_number_rand + ".jpg";
 
</script>

Il faut vérifier que tes images soient bien dans le répertoire ../faces/hasard_test/ et qu'elles s'appellent 1.jpg, 2.jpg, ...

**chris241182** · 03/08/2010, 13h55

Envoyé par gael

Ma connexion a été coupée pendant que j'écrivais ce message:

Code :

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

1
2
3
4
5
6
7
8
9
10
<img id="image-aleatoire"/>
  
<script type="text/javascript"> 
 
nb_img = 5 ;
img_number_rand= Match.floor( nb_img * Math.rand() );
document.getElementById('image-aleatoire').src= "../faces/hasard_test/"+ img_number_rand + ".jpg";
 
</script>

Il faut vérifier que tes images soient bien dans le répertoire ../faces/hasard_test/ et qu'elles s'appellent 1.jpg, 2.jpg, ...

ok j'essaye
oui les images sont bien la, regarde
http://www.fm-design.net/faces/hasard_test/1.jpg
http://www.fm-design.net/faces/hasard_test/2.jpg
http://www.fm-design.net/faces/hasard_test/3.jpg
http://www.fm-design.net/faces/hasard_test/4.jpg
http://www.fm-design.net/faces/hasard_test/5.jpg
merci d'etre revenu

**gael** · 03/08/2010, 13h57

dans ce cas le répertoire est : "/faces/hasard_test/" (sans les .. devant)

**chris241182** · 03/08/2010, 14h01

c'est fait, ca ne marche tjs pas

c'est en ligne

**gael** · 03/08/2010, 14h19

c'est parce qu'il ne fallait pas lire Match.floor mais Math.floor... j'ai du être influencé par le sujet

**gael** · 03/08/2010, 14h20

un bon moyen de débugger le javascript (entre autres fonctionalités très intéressantes): https://addons.mozilla.org/fr/firefox/addon/1843/

ou si tu n'utilises pas firefox: http://getfirebug.com/firebuglite

**chris241182** · 03/08/2010, 14h23

lol j'ai remplacé match par math... mais toujours rien
en ligne

**gael** · 03/08/2010, 14h25

Math.rand > Math.random

script image aléatoire ?

JavaScript

Discussions similaires

Partager

Partager