script image aléatoire ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/08/2010, 11h25
chris241182

script image aléatoire ?

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

Code:

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>

Citation:
Envoyé par gael
Code:

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 ?

03/08/2010, 11h41
gael

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.
03/08/2010, 11h43
chris241182

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
03/08/2010, 11h45
gael

Citation:

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.
03/08/2010, 11h47
chris241182

Citation:

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... :(
03/08/2010, 11h58
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 = ....
03/08/2010, 12h02
chris241182

Citation:

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
03/08/2010, 12h11
gael

Tu as juste à écrire ta balise comme ceci:

<img id="image-aleatoire" />
03/08/2010, 12h15
chris241182

Citation:

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
03/08/2010, 12h29
chris241182

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

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

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

Citation:
Envoyé par gael
Ma connexion a été coupée pendant que j'écrivais ce message:
Code:

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 :)

03/08/2010, 13h57
gael

dans ce cas le répertoire est : "/faces/hasard_test/" (sans les .. devant)
03/08/2010, 14h01
chris241182

c'est fait, ca ne marche tjs pas :(
c'est en ligne
03/08/2010, 14h19
gael

c'est parce qu'il ne fallait pas lire Match.floor mais Math.floor... j'ai du être influencé par le sujet :)
03/08/2010, 14h20
gael

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
03/08/2010, 14h23
chris241182

lol j'ai remplacé match par math... mais toujours rien
en ligne
03/08/2010, 14h25
gael

Math.rand > Math.random
03/08/2010, 14h27
gael

surement parce que je suis parisien
03/08/2010, 14h31
chris241182

c'est fait tjs rien
peut etre img_number_rand >>>> img_number_random ?
en ligne
03/08/2010, 14h33
chris241182

ca marcheeeeeeeeeeeeeeeeeeee
merci 10000000000000 fois tu m'as sauvé
mon travail mérite récompense.
tu as un compte paypal ?

par contre j'ai remarqué que des fois il n'affiche rien
03/08/2010, 14h33
gael

Remplace aussi floor (plancher) par ceil (plafond), parce que sinon ca peut être égal à 0
03/08/2010, 14h36
chris241182

tu connais le code pour que la meme image ne se répètent pas 2 fois avant d'avoir affiché toutes les images du dossier ?
encore merci t'es génial :)
03/08/2010, 14h38
gael

Citation:

mon travail mérite récompense.

et le mien alors :cry::mrgreen:

Citation:

tu as un compte paypal ?

ce n'est pas le but

Citation:

Envoyé par chris241182

ca marcheeeeeeeeeeeeeeeeeeee
merci 10000000000000 fois tu m'as sauvé

Ca serait encore mieux si tu pouvais le faire sur le serveur, ta page, c'est du html brut? ca te dirait un peu de php?

Citation:

par contre j'ai remarqué que des fois il n'affiche rien

voir post précédent
03/08/2010, 14h40
gael

Citation:

tu connais le code pour que la meme image ne se répètent pas 2 fois avant d'avoir affiché toutes les images du dossier ?

Il faudrait utiliser un cookie, mais ça devient un peu plus compliqué surtout s'il faut gérer le random sur un ensemble restreint d'images.
03/08/2010, 14h42
chris241182

Citation:

Envoyé par gael

et le mien alors :cry::mrgreen:

ce n'est pas le but

Ca serait encore mieux si tu pouvais le faire sur le serveur, ta page, c'est du html brut? ca te dirait un peu de php?

voir post précédent

je voulais dire TON travail excuse moi lol
je voulais t'envoyer une petite rémunération...
toutes mes pages sont en html. J'utilise un fichier modèle avec des régions répétées (header, menu gauche, menu droite, pied de page). J'ai peur de devoir refaire tout mon site si je veux le passer en php.
03/08/2010, 14h53
chris241182

ah oui je voulais te demander aussi...
si je veux ajouter des images, je n'ai qu'a les nommer 6.jpg 7.jpg etc... ou elles peuvent avoir un autre nom ?
03/08/2010, 14h55
gael

Citation:

toutes mes pages sont en html. J'utilise un fichier modèle avec des régions répétées (header, menu gauche, menu droite, pied de page). J'ai peur de devoir refaire tout mon site si je veux le passer en php.

Tu n'aurais pas tout à refaire mais il y aurait surement des changements à apporter. Si tu veux développer ton site un script serveur est presque indispensable.
03/08/2010, 14h56
chris241182

Citation:

Envoyé par gael

Tu n'aurais pas tout à refaire mais il y aurait surement des changements à apporter. Si tu veux développer ton site un script serveur est presque indispensable.

tu veux dire quoi par "développer" ?
03/08/2010, 14h58
gael

Par exemple ajouter de nouvelles pages. Si tu en as 5, tu peux encore recopier ton modèle, mais si tu en as 100 ça devient très fastidieux.
03/08/2010, 15h02
chris241182

d'accord je vois ce que tu veux dire mais je pense que pour l'instant je vais rester dans le html même si je sais qu'il faudra que je migre en php un jour ou l'autre.
tu n'as pas du voir ma question un peu plus haut sur l'ajout d'images supplémentaires.
je peux t'ajouter dans mes contacts ?

c'est plus simple si tu continues à les nommer par un numéro: tu n'auras qu'à changer le nb_img.

Si tu veux les nommer par un autre nom, il faut faire un tableau:

var nom_images = new Array( 'nom_image1', 'nom_image2',....);

le script va aussi changer un peu:
Code:

1 2 3 4 5 6 var nom_images = new Array( 'nom_image1', 'nom_image2',....); nb_img = nom_images.length ; img_number_rand= Math.ceil( nb_img * Math.random() ); document.getElementById('image-aleatoire').src= "/faces/hasard_test/"+ nom_images[img_number_rand]+ ".jpg";

Citation:
Envoyé par gael
c'est plus simple si tu continues à les nommer par un numéro: tu n'auras qu'à changer le nb_img.

Si tu veux les nommer par un autre nom, il faut faire un tableau:

var nom_images = new Array( 'nom_image1', 'nom_image2',....);

le script va aussi changer un peu:
Code:

1 2 3 4 5 6 var nom_images = new Array( 'nom_image1', 'nom_image2',....); nb_img = nom_images.length ; img_number_rand= Math.ceil( nb_img * Math.random() ); document.getElementById('image-aleatoire').src= "/faces/hasard_test/"+ nom_images[img_number_rand]+ ".jpg";
ok de toute façon il faudra bien que je rentre le nom de chaque fichier dans le tableau donc ca ne va pas me faire gagner de temps, au contraire je pense... je peux t'ajouter dans mes contacts sur le site ?
ah oui et aussi... puis-je mettre des png dans mon dossier et remplacer + ".jpg"; par + ".png"; ?

03/08/2010, 15h10
gael
Code:

1 2 je peux t'ajouter dans mes contacts ?
on peut le faire ici?

oui pas de pb
03/08/2010, 15h21
chris241182

ah oui et aussi... puis-je mettre des png dans mon dossier et remplacer + ".jpg"; par + ".png"; ?

j'ai vu que tu as un site internet...
aurais-tu un logo en 159px de large pour que j'ajoute ton site dans mes partenaires ?

Citation:

ah oui et aussi... puis-je mettre des png dans mon dossier et remplacer + ".jpg"; par + ".png"; ?

Dans ce cas, il faut utiliser un tableau pour stocker l'extension de tes images et éventuellement leur emplacement... donc autant mettre l'url complete dans le tableau
Code:

1 2 3 4 5 var url_images = new Array( 'url_image1', 'url_image2',....); nb_img = url_images.length ; img_number_rand= Math.ceil( nb_img * Math.random() ); document.getElementById('image-aleatoire').src= url_images[img_number_rand];
ou si tu veux n'utiliser que des png, il suffit de modifier l'extension à la fin de la 3è ligne.

Pour les photos, le png est souvent beaucoup plus volumineux que le jpg

03/08/2010, 15h27
gael

Citation:

Envoyé par chris241182

ah oui et aussi... puis-je mettre des png dans mon dossier et remplacer + ".jpg"; par + ".png"; ?

j'ai vu que tu as un site internet...
aurais-tu un logo en 159px de large pour que j'ajoute ton site dans mes partenaires ?

http://feneu.com/wp-content/themes/c...mages/logo.jpg

ca doit pas faire exactement 159px, mais tu peux utiliser l'attribut style, ou idéalement une feuille de style css:

<img src="http://feneu.com/wp-content/themes/custom/images/logo.jpg" style="width:159px;"/>

En tout cas merci pour cette attention
03/08/2010, 15h27
chris241182

ok
aurais-tu un logo en 159px de large pour que j'ajoute ton site dans mes partenaires ?

Voir 40 message(s) de cette discussion en une page

Fuseau horaire GMT +2. Il est actuellement 12h24.