Sujet Précédent Sujet Suivant

Javascript+image aléatoire

Résolu/Fermé
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 - 8 mai 2010 à 22:01
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 - 12 mai 2010 à 15:54
Bonjour

Dans un script PHP, je dispose d'un tableau de chaînes de caractères contenant les chemins de toutes mes images.
Actuellement, sur la page principale de mon site local, j'affiche une image aléatoire à chaque chargement de la page à l'aide d'un script PHP.
J'aimerai, à la place, un script qui change l'image aléatoire toutes les x secondes, sans si possible charger la page entièrement.
Le PHP ne sachant pas faire ça, je me tourne vers le Javascript mais ce langage est un mystère pour moi.
Quelqu'un aurait-il, svp, un script javascript pouvant afficher une image aléatoire toutes les x secondes à partir d'une liste d'images contenu dans une variable PHP ?

Merci d'avance.


A voir également:

25 réponses

  • 1
  • 2
Réponse 1 / 25
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
8 mai 2010 à 22:05
Un économiseur de page internet...
0
Réponse 2 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
8 mai 2010 à 22:29
Pas vraiment, en fait.
La page en question affiche la liste des répertoires contenant mes images... Pour illustrer la page, je place en miniature une image aléatoire en dessous du titre.
0
Réponse 3 / 25
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
Modifié par Fallentree le 8/05/2010 à 22:43
En ben! un arondi sur le max de tableau du fichier .
IndiceduTableau=Math.round'(Math.ramdon()*Max)
0
Réponse 4 / 25
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
8 mai 2010 à 22:50
Y a pas un script pour afficher une horloge qui pourrait y etre adapté.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
8 mai 2010 à 23:49
Peut-on insérer une fonction PHP dans un script Javascript ?
De cette manière, je pourrai me servir du Javascript pour recharger une partie de mon script PHP.

Après tout, il est possible d'insérer du PHP dans du HTML et inversement.
0
Réponse 6 / 25
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
11 mai 2010 à 00:17
Pour faire simple PHP coté serveur c est a dire lors de la rédaction du code HTML.
Javacript est incorporer dans le code html. Donc si ta rédaction du php est faite de facon a ce que ce code perdure ca marchera.
Exemple <?php echo "<a href='toto.php' onclick=addAll(this,'derniere blague') class=links>Derniere blague </a>"; ?>
On a bien du script (en gras) dans du php...
L'inverse n est pas possible ...
<script ...> ....<?php> ...<?> .......</script>
Du moins lorsque j ai essaye le compilateur s endromait et puis pas de réponse pour l ajout de code...

Bref...
Mets tes fichiers dans une balise masquée de type select et parcours la liste periodiquement...
Y a surement mieux...
Un tableau ou une structure...

Cherches autour de commande setTimeout("mon de la fonction",tempsms)...
0
Réponse 7 / 25
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 08:16
Bonjour,

@Fallentree
L'ajout de php dans du code javascript est tout a fais possible
ex : 
<script>
var plop = <?php echo $varphp; ?>;
</script>


Ensuite il n'y a pas de compilateur dans ces langages se sont des langages interprétés..

Neliel pour ton problème essaie un truc du genre

Code à coller entre les balise META 
<script>
var tabImg = new Array("images/fleur.png","images/pont.png","images/plopplop.png","images/moto.png","images/bouteille.png");
var temps = 2000;
function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
alert(num);
alert(tabImg[num]);
document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}
</script>


et code à coller dans ton BODY 

<img src="images/imagesParDefaut.png" id="img">


la seule chose à faire est de changer le chemin des images par les tiens (tu peux en ajouter ou en enlever ;))
et de définir le temps entre chaque images avec la variable temps qui est en ms

Oh et petit détail :p
si tu veux lancer le changement d'image au chargement de la page voila ce qu'il te faut 

<body onload="changeImage();">



En espérant avoir aidé ;)

Adns
0
Réponse 8 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 08:37
Et si les chemins de mes images sont contenus dans une liste PHP, ça fonctionne toujours ?
0
Réponse 9 / 25
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 08:43
peux tu me donner la forme de ta liste ?
0
Réponse 10 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 09:04
C'est une variable PHP, un tableau de chaines de caractères qui contient le chemin relatif de chaque image ($liste_image_total[])

Pour info, mon site local gère plus de 12000 images pour le moment... les entrer manuellement dans le script est exclue à cause de leur nombre mais aussi du fait que je peux en ajouter comme je veux en mettant simplement l'image dans un répertoire du site.
J'avais pensé les gérer par base de données mais je craignais d'alourdir non seulement ma base de données mais également la rapidité de chargement des pages.

Une dernière info, les images que mon site affiche n'ont pas d'extension.
0
Réponse 11 / 25
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 09:17
J'ai trouver un petit truc qui pourrai t'aider ;)

https://codes-sources.commentcamarche.net/

bon courage ;)

Adns
0
Réponse 12 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 09:24
Je vais essayé, cela me semble très bien pour mon cas, merci.
Autre question, les balises <script></script>, es-ce obligatoire de les mettre dans l'entête HTML ?
0
Réponse 13 / 25
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 09:29
Ouai assez important lol ;)

cela permet au navigateur de faire la différence entre HTML et la javascript
d'ailleurs pour faire bien il faudrait mettre

<script language="JavaScript">
</script>


Oubli pas le tag résolu ;)

Adns
0
Réponse 14 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 09:34
Je dis ça, parce que le créateur de la fonction que tu m'as donné semble s'en servir également dans le corps du HTML... Donc je me disais qu'il s'agissait seulement d'une norme W3C or cette norme importe peu pour mon cas car je ne compte pas mettre mon site sur le net.

J'ai entendu dire qu'il ne fallait plus mettre <script language="JavaScript"> mais <script type="text/javascript">... es-ce encore une histoire de norme ?
C'est pas très clair tout ça...

0
Réponse 15 / 25
xav3601 Messages postés 3288 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 2 mars 2016 311
11 mai 2010 à 09:37
Il faut savoir qu'en faisant ca tu vas devoir charger toutes images en même temps!
donc suivant le nombre ca va te prendre du temps!

Sinon ce qui a été dis me semble assez complet ;-)
0
Réponse 16 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 12:56
ça ne fonctionne pas... je vous met ce que j'ai mis.

Avant l'entête HTML, j'ai crée la liste PHP $liste_image_total

Ensuite dans le Head, je place ceci: 

<script language="JavaScript">


function php2js( $php_array, $js_array_name ) {
	// contrôle des parametres d'entrée
	if( !is_array( $php_array ) ) {
		trigger_error( "php2js() => 'array' attendu en parametre 1, '".gettype($array)."' fourni !?!");
		return false;
	}
	if( !is_string( $js_array_name ) ) {
		trigger_error( "php2js() => 'string' attendu en parametre 2, '".gettype($array)."' fourni !?!");
		return false;
	}

	// Création du tableau en JS
	$script_js = "var $js_array_name = new Array();\n";
	
	// on rempli le tableau JS à partir des valeurs de son homologue PHP
	foreach( $php_array as $key => $value ) {
	
		// pouf, on tombe sur une dimension supplementaire
		if( is_array($value) ) {
			// On va demander la création d'un tableau JS temporaire
			$temp = uniqid('temp_'); // on lui choisi un nom bien barbare
			$t = php2js( $value, $temp ); // et on creer le script JS
			// En cas d'erreur, remonter l'info aux récursions supérieures
			if( $t===false ) return false;

			// Ajout du script de création du tableau JS temporaire
			$script_js.= $t;
			// puis on applique ce tableau temporaire à celui en cours de construction
			$script_js.= "{$js_array_name}['{$key}'] = {$temp};\n";
		}
		
		// Si la clef est un entier, pas de guillemets
		elseif( is_int($key) )  $script_js.= "{$js_array_name}[{$key}] = '{$value}';\n";
		
		// sinon avec les guillemets
		else $script_js.= "{$js_array_name}['{$key}'] = '{$value}';\n";
	}

	// Et retourn le script JS
	return $script_js;
} //Convertit la liste PHP en liste JavaScript

var tabImg = php2js($liste_image_total, 'liste_image');
var temps = 2000;

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
alert(num);
alert(tabImg[num]);
document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}
</script>


Et dans le corps, je met ça: 

<body onload="changeImage();">

<img src="images/imagesParDefaut.png" id="img">


Mais il n'affiche toujours pas les images, juste un cadre vide. A noté que j'ai vérifié au préalable la liste PHP.


0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 14:52
A priori la fonction php2js est une fonction php donc elle doit etre dans la parti php de ton code

entre <?php et ?>

Adns
0
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 14:59
Je l'ai sortie de l'entête et je l'ai mise avant l'entête html, entre deux balises PHP et ça ne fonctionne toujours pas...
0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 15:22
redonne ton code stp ;)

Adns
0
Réponse 17 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 15:28 
<?php

...  (j'occulte la partie qui récupère le chemin de toutes mes images (elle fonctionne parfaitement)

function php2js( $php_array, $js_array_name ) {
	// contrôle des parametres d'entrée
	if( !is_array( $php_array ) ) {
		trigger_error( "php2js() => 'array' attendu en parametre 1, '".gettype($array)."' fourni !?!");
		return false;
	}
	if( !is_string( $js_array_name ) ) {
		trigger_error( "php2js() => 'string' attendu en parametre 2, '".gettype($array)."' fourni !?!");
		return false;
	}

	// Création du tableau en JS
	$script_js = "var $js_array_name = new Array();\n";
	
	// on rempli le tableau JS à partir des valeurs de son homologue PHP
	foreach( $php_array as $key => $value ) {
	
		// pouf, on tombe sur une dimension supplementaire
		if( is_array($value) ) {
			// On va demander la création d'un tableau JS temporaire
			$temp = uniqid('temp_'); // on lui choisi un nom bien barbare
			$t = php2js( $value, $temp ); // et on creer le script JS
			// En cas d'erreur, remonter l'info aux récursions supérieures
			if( $t===false ) return false;

			// Ajout du script de création du tableau JS temporaire
			$script_js.= $t;
			// puis on applique ce tableau temporaire à celui en cours de construction
			$script_js.= "{$js_array_name}['{$key}'] = {$temp};\n";
		}
		
		// Si la clef est un entier, pas de guillemets
		elseif( is_int($key) )  $script_js.= "{$js_array_name}[{$key}] = '{$value}';\n";
		
		// sinon avec les guillemets
		else $script_js.= "{$js_array_name}['{$key}'] = '{$value}';\n";
	}

	// Et retourn le script JS
	return $script_js;
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Darkness Angel - Bibliothèques d'images </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script language="JavaScript">

var tabImg = php2js($liste_image_total, 'liste_image');
var temps = 2000;

function changeImage(){
num = Math.floor(Math.random() * tabImg.length-1)+1;
alert(num);
alert(tabImg[num]);
document.getElementById("img").src=tabImg[num];
setTimeout("changeImage()",temps);
}

</script>
</head>

<body onload="changeImage();">

<p class="titre">


</p>

...
<img src="images/imagesParDefaut.png" id="img">
...
</body>
</html>


J'ai du code avant et après la balise <img> mais ils ne concernent pas le problème.

Encore merci de te pencher sur mon cas...
0
Réponse 18 / 25
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 15:35
L'appel de la fonction php2js étais mal utilisé

essai de remplacer 

var tabImg = php2js($liste_image_total, 'liste_image');


par 

<?php echo php2js($liste_image_total, 'tabImg'); ?>


Adns
0
Réponse 19 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 15:43
Toujours pas...
Es-ce parce que mes images n'ont pas d'extensions ?... pourtant HTML arrive très bien à afficher des images sans extensions...
0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 16:00
comment est déclaré ton tableau en php ?

es ce que tu vois au moins les alert js ?

Adns
0
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
11 mai 2010 à 16:15
Si ton tableau est bien un tableau (array) :p

le problème peux venir de ceci : xml:lang="fr"

retire le de ta balise html

j'ai tester le code et ca fonctionne sans problème ;)
0
Réponse 20 / 25
Neliel Messages postés 6146 Date d'inscription jeudi 9 juillet 2009 Statut Contributeur Dernière intervention 20 mars 2017 1 687
11 mai 2010 à 16:29
Toujours pas...

Ma liste PHP est déclaré de cette manière: 

$rep_racine='./';
	
	//$rep_racine: contient le chemin relatif de la racine du site
	
	if($cle_rep_racine=@opendir($rep_racine)) //ouverture du répertoire racine
	{
		//$cle_rep_racine: Contient la clé d'ouverture du répertoire racine
		
		while(($fichier=readdir($cle_rep_racine))!==false) //lecture de chaque fichier du répertoire racine
		{
			$nb_caractere_nom_fichier=strlen($fichier); //Récupération du nombre de caractère du nom du fichier courant
			
			//$nb_caractere_nom_fichier: Contient le nombre de caractere du fichier courant lu dans le répertoire racine
			
			$est_repertoire_valide=1; //Par défaut le fichier est un répertoire valide
			
			//$est_repertoire_valide: Détermine si le fichier courant est un répertoire valide (0: non, 1: oui)
			
			$position_caractere_nom_fichier=0; //Par défaut au début de la chaine de caractères
			
			//$position_caractere_nom_fichier: Position du caractère courant dans la chaine de caractère représentatif du nom du fichier courant
			
			if($fichier[0]=='V' or $fichier[0]=='D' or $fichier[0]=='o' or $fichier=="mdp") //Test si le fichier est un fichier non valide
				$est_repertoire_valide=0; 
			while($position_caractere_nom_fichier!=$nb_caractere_nom_fichier) //Parcours le nom du fichier courant
			{
				$caractere_lu=$fichier[$position_caractere_nom_fichier]; 
				
				//$caractere_lu: contient le caractère courant du nom du fichier courant
				
				if($caractere_lu=='.') 
					$est_repertoire_valide=0; //Si il y a un "." dans le nom du fichier courant, alors ce n'est pas un répertoire
				$position_caractere_nom_fichier=$position_caractere_nom_fichier+1; //passe au caractère suivant
			}
	
			if($est_repertoire_valide==1) //Si le fichier courant est un répertoire valide
			{
				$liste_repertoire[]=$fichier; //Enregistre les répertoires valides dans une liste
				
				//$liste_repertoire: contient la liste de tous les répertoires valides à la racine du site
				
				$categorie_repertoire[]=substr($fichier,0,3); //Enregistre la categorie des répertoires dans une liste
				
				//$categorie_repertoire: contient la categorie de chaque répertoire valide classée dans le même ordre que sont classés les répertoire valide dans la liste $liste_repertoire
				
				$nom_affichage_repertoire[]=substr($fichier,4,strlen($fichier)-4); //Enregistre le nom d'affichage des répertoire dans une liste
				
				//$nom_affichage_repertoire: contient le nom qui sera affiché sur le site des répertoire valide classés dans le même ordre que sont classés les répertoire valide dans la liste $liste_repertoire
				
			}
		}
		closedir($cle_rep_racine);
	}
	
	$nb_repertoire=sizeof($liste_repertoire); 
	
	//$nb_repertoire: Contient le nombre de répertoire valide à la racine du site
	
	for($position_liste_repertoire=0;$position_liste_repertoire<$nb_repertoire;$position_liste_repertoire++)
	{
		$repertoire_courant=$liste_repertoire[$position_liste_repertoire];
		
		$chemin_repertoire_courant="./".$repertoire_courant;
		
		if($cle_repertoire_courant=@opendir($chemin_repertoire_courant)) //Ouverture du répertoire courant
		
		//$cle_repertoire_courant: Contient la clé d'ouverture du répertoire en cours de lecture
		
		{
		while(($fichier_repertoire_courant=readdir($cle_repertoire_courant))!==false) //Lecture de chaque fichier, un par un, dans le répertoire en cours de lecture
		{
			
			//$fichier_repertoire_courant: Contient le nom du fichier courant lu dans le répertoire en cours de lecture
		
			if($fichier_repertoire_courant!=".." && $fichier_repertoire_courant!="." && $fichier_repertoire_courant!="Thumbs.db" && $fichier_repertoire_courant!="Aide.txt") //Teste si le fichier est une image valide
			{
				$liste_image_total[]=$chemin_repertoire_courant."/".$fichier_repertoire_courant; //Enregistrement des images valides du répertoire courant dans une liste
				
				//$liste_image_total: Contient la liste de toutes les images du sites
			}
		}
		closedir($cle_repertoire_courant); //Fermeture du répertoire aléatoire
		}
	}


Les chemins sont placés dans $liste_image_total...
Sous ce format: "./mb3 Gallerie1/01"
Les images n'ont aucune extensions... je me demande si ce n'est pas la cause du problème...
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
tirage aléatoire sans doublon
missfraise02 -
sc -

14 réponses