Changement d'image toutes les 5s

Version imprimable

Bonjour,

Je cherche la solution a charger une nouvelle image toutes les 5 secondes:

Pour ce faire il faut que j’exécute le fichier php random_picture.php qui redéfinit l'image miniature.jpg

Mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <img onload="Start" src="miniature.jpg" > <script> function Href(){ //set this page's window.location.href to the target page window.location.href = "random_picture.php"; } function Start(){ // but make it wait while we do our progress... window.setInterval("Href", 5000); } </script>
Seulement, je n'ai pas du comprendre comment ça fonctionne car la page random_picture.php n'est pas exécuter (pas de changement d'image)

Merci à vous ,)

Si tu veux afficher une image il faut utiliser la balise HTML IMG.

Voici un exemple qui utilise jQuery.
Il affiche une image sélectionnée au hasard toutes les 2 secondes.

Code:

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
<!DOCTYPE HTML>
 
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
var _slideShow     = null;
 
function startSlide() {
        _slideShow    = setInterval('imageRandom()',2000);
}
 
function stopSlide() {
        clearInterval(_slideShow);
}
 
function imageRandom() {
    $(function() {
                res = Math.random();
                $.get('image_random.php?r='+res, function(data2) {
                $('#div_image_xxxx').html(data2);                       
        });
    });
}
 
 </script>
</head>
<body onload="imageRandom()">
 
<div id="div_image_xxxx">
</div>
<input type="button" value="Start" onclick="startSlide();" />&nbsp;<input type="button" value="Stop" onclick="stopSlide();"/>
 
</body>
</html>

Le fichier suivant simule la sélection d'une image. Tu as sûrement autre chose, mais le principe est de mettre l'url d'une image dans la balise IMG.

image_random.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php 
$img = array();
$img[]='01CO.jpg';
$img[]='01CA.jpg';
$img[]='01TR.jpg';
$img[]='01PI.jpg';
$img[]='07CO.jpg';
$img[]='07CA.jpg';
$img[]='07TR.jpg';
$img[]='07PI.jpg';
$img[]='JOCA.jpg';
$img[]='JOTR.jpg';
$img[]='JOPI.jpg';
$img[]='QUCO.jpg';
$img[]='QUCA.jpg';
$img[]='QUTR.jpg';
$img[]='QUPI.jpg';
$img[]='KICO.jpg';
$img[]='KICA.jpg';
$img[]='KITR.jpg';
$img[]='KIPI.jpg';
$image = $img[array_rand($img)];
echo "<img src='cartes/$image' />";
?>

10/02/2017, 11h56
eleydet

Bonjour,

Vous pouvez aussi vous inspirer de cette solution (CTRL+U pour afficher le code), à rénover je l'admets.

http://eleydet.free.fr/BTS/themes/mo...nim/index.html

Merci à tous pour vos réponses. :)

J'utilise un genre de CMS simplifié pour la construction de mes pages. Mon code apparaît dans un tableau de base de donnée.
Tous ça pour dire que je ne peut pas mettre de php dans ma page d'affichage d'image.
D’où l'appel à un fichier php que j'ai développé, qui fonctionne très bien et qui me modifie une image miniature.
Mon fichier php fonctionne très bien.
Cependant, j'ai besoin d’exécuter le code du fichier php et de faire un rafraîchissement de mon image. Je me suis rendu compte que le navigateur gardait en mémoire l'ancienne image en cache.

J'ai avancé au niveau de mon code:

Code:

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
<!-- CONTENU -->
<div style="height:400px;  background-color: rgba(0,0,0,0.5);"> <!-- Modifiez height pour rÃ©gler la hauteur du cadre -->
<img onload="ChangerImage()" src="miniature.jpg" id="masuperimage" />
</div>
 
 
<SCRIPT language="JavaScript" type="text/javascript">
 
function ChangerImage(){
  	//window.location.href = "random_picture.php";
    //document.getElementById("masuperimage").innerHTML='<img src="miniature.jpg"/>';
    //document.getElementById("masuperimage").src = "miniature.jpg";
 
	//window.location.reload()	
   var xhr = getXhr();
   // On défini ce qu'on va faire quand on aura la réponse
   xhr.onreadystatechange = function(){
      // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      if(xhr.readyState == 4 && xhr.status == 200){
         // Ici on va voir comment faire du post
         xhr.open("POST","random_picture.php",true);
         // ne pas oublier ça pour le post
         xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
         // ne pas oublier de poster les arguments
         // ici, tes 4 valeurs de départ à savoir : el1,el2,el3 et la nouvelle el4
         xhr.send();
      }
   }
   document.getElementById("masuperimage").innerHTML='<img src="miniature.jpg"/>';
   setTimeout("ChangerImage()", 15000) 
}   
 
    //fonction pour préparer les appels ajax
function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest) // Firefox et autres
      xhr = new XMLHttpRequest();
   else if(window.ActiveXObject){ // Internet Explorer
      try {
         xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      xhr = false;
   }
   return xhr;
}
 
</SCRIPT>

Seulement, je n'ai toujours rien

Merci pour votre aide ;)

10/02/2017, 12h48
badaze

Tu es sûr que l'évènement onload existe pour img ?
Pourquoi n'utilises tu pas jQuery qui est indépendant du navigateur ?
Peux-tu poster le code de random_picture.php ?
10/02/2017, 13h05
SpaceFrog

Il suffit juste de modifier le src d'eun balise img présente sur la page en prenant soi de mettre un paramètre get dans l'url qui sera modifié a chaque fois pour contourner le cache .
oui la balise img possède bien un onload ...

on peut précharger l'image dans une new image(à est sur son onload modifier le scr de la balise présente sur la page

Merci pour vos réponses

Pour le cache j'ai testé de mettre
<img onload="ChangerImage()" src="miniature.jpg?x=1" id="masuperimage" />

Mais ça n'a pas été concluant, l'image change plus.
J'aurais besoin de plus de détail ;)

Voici mon code concernant random_picture.php:

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
$dossier = '../nfs/';
$ext_ok = array('jpg','JPG','jpeg','JPEG','gif','GIF','png','PNG');
 
$dossier_images = $dossier.'/*/*/*.{'.implode(',',$ext_ok).'}';
 
$tab_dossier = glob($dossier_images,GLOB_BRACE);
 
$tab_dossier = isset($tab_dossier) && is_array($tab_dossier) ? $tab_dossier : array();
if(count($tab_dossier) > 0){
  $img_aleatoire = $tab_dossier[array_rand($tab_dossier)];
 
 
////////////////////////// Cr&eacute;ation de la miniature //////////////////////////
$DESTINATION_FOLDER="";
$nomFichier="miniature";
$limite = 420;
 
$size = getimagesize($img_aleatoire);
$hauteur = $size[1];
$largeur = $size[0];
 
if($hauteur >= $limite OR $largeur >= $limite)
{
	if($hauteur >= $limite AND $largeur >= $limite) // Calcule des dimensions miniatures
	{
		if($hauteur > $largeur)
		{
			$largeur2 = $largeur / ($hauteur / $limite); // Calcule de la largeur miniature
			$hauteur2 = $limite;
			//echo'hauteur';
		}
		else
		{
			$hauteur2 = $hauteur / ($largeur / $limite); // Calcule de la hauteur miniature
			$largeur2 = $limite;
			//echo'largeur';
		}
	}
	elseif($hauteur >= $limite AND $largeur <= $limite)
	{
		$largeur2 = $largeur / ($hauteur / $limite); // Calcule de la largeur miniature
		$hauteur2 = $limite;
	}
	elseif($largeur >= $limite AND $hauteur <= $limite)
	{
		$hauteur2 = $hauteur / ($largeur / $limite); // Calcule de la hauteur miniature
		$largeur2 = $limite;
	}
	else
	{
		$hauteur2 = $hauteur;
		$largeur2 = $largeur;
	}
 
	$destination = imagecreatetruecolor($largeur2, $hauteur2); // On cr&eacute;e la miniature vide
	$source = imagecreatefromjpeg($img_aleatoire); // L'image est la source
	$largeur_source = imagesx($source); // Largeur de la source
	$hauteur_source = imagesy($source); // Hauteur de la source
	$largeur_destination = imagesx($destination); // Largeur de la miniature
	$hauteur_destination = imagesy($destination); // Hauteur de la miniature
	$nomMiniature = $nomFichier.'.jpg'; // Nom de la miniature
 
	imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination, $hauteur_destination, $largeur_source, $hauteur_source); // Creation de la miniature
	imagejpeg($destination, $DESTINATION_FOLDER.$nomMiniature);
}  
 
  echo '<img src="miniature.jpg"/>';
}
else
{
  echo 'Pas de fichier de type '.implode(',',$ext_ok).' dans le répertoire '.$dossier;
  // ou affichage d'une image par défaut provenant d'un autre répertoire
}

PS: Pour info, j'utilise se morceau de code sur une tablette android murale (photos disponible sur mon NAS)

EDIT> J'ai avancé mon code:

Code:

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
<SCRIPT language="JavaScript" type="text/javascript">
 
function ChangerImage(){
  	//window.location.href = "random_picture.php";
    //document.getElementById("masuperimage").innerHTML='<img src="miniature.jpg"/>';
    //document.getElementById("masuperimage").src = "miniature.jpg";
   var myimg = new Image();
    myimg.src="miniature.jpg"
	//window.location.reload()	
   var xhr = getXhr();
   // On défini ce qu'on va faire quand on aura la réponse
 	xhr.open("POST","random_picture.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, tes 4 valeurs de départ à savoir : el1,el2,el3 et la nouvelle el4
   xhr.send(null);
 
  xhr.onreadystatechange = function(){
      // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      if(xhr.readyState == 4 && xhr.status == 200){
         // Ici on va voir comment faire du post
          // document.getElementById("masuperimage").innerHTML='<img src="miniature.jpg?"/>';
        document.getElementById("masuperimage").innerHTML=myimg.src;
      }
   }
 
   setTimeout("ChangerImage()", 7000) 
 
}   
 
    //fonction pour préparer les appels ajax
function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest) // Firefox et autres
      xhr = new XMLHttpRequest();
   else if(window.ActiveXObject){ // Internet Explorer
      try {
         xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      xhr = false;
   }
   return xhr;
}
 
</SCRIPT>

Il me reste plus que le problème de cache non résolu?

Je ne suis pas sûr que tu comprennes bien le code que tu utilises. Est-ce toi qui l'a fait ou bien est-ce que tu l'as copié ?

Le code que tu as posté ne peut pas marcher. Tu utilises random_picture.php comme si c'était une image mais dans ce cas il faut envoyer un header. C'est à dire faire comme si tu téléchargeais une vraie image jpeg. Pour le moment je pense que cette technique va au delà de tes connaissances actuelles en php.

Pour le cache il faut que l'URL change à chaque fois. Regarde l'exemple que j'ai posté qui utilise jQuery => res = Math.random();

Pour que tu comprennes le fonctionnement avec jQuery, essaie le code ci-dessous. Il faut que tu modifies la variable $dossier afin qu'elle corresponde à ton arborescence.

Code:

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
<!DOCTYPE HTML>
 
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
var _slideShow     = null;
 
function startSlide() {
        console.log('toto');
        _slideShow    = setInterval('imageRandom()',2000);
}
 
function stopSlide() {
        clearInterval(_slideShow);
}
 
function imageRandom() {
    $(function() {
                res = Math.random();
                $.get('image_random.php?r='+res, function(data2) {
                $('#div_image_xxxx').html(data2);                       
        });
    });
}
 
 </script>
</head>
<body onload="imageRandom()">
 
<div id="div_image_xxxx">
</div>
<input type="button" value="Start" onclick="startSlide();" />&nbsp;<input type="button" value="Stop" onclick="stopSlide();"/>
 
</body>
</html>

Fichier image_random.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//$dossier      = '../nfs/';
$dossier        = "cartes";
$ext_ok         = array('jpg','JPG','jpeg','JPEG','gif','GIF','png','PNG');
 
$dossier_images = $dossier.'/*.{'.implode(',',$ext_ok).'}';
$tab_dossier    = glob($dossier_images,GLOB_BRACE);
$tab_dossier    = isset($tab_dossier) && is_array($tab_dossier) ? $tab_dossier : array();
 
$img_aleatoire  = '';
if(count($tab_dossier) > 0){
  $img_aleatoire = $tab_dossier[array_rand($tab_dossier)];
}
echo "<img src='$img_aleatoire' />";

Citation:

Envoyé par badaze

En faite dans random_picture.php ce que j'affiche me sert de debug. L'important c'est de redefinir l'image en miniature avec imagejpeg($destination, $DESTINATION_FOLDER.$nomMiniature);

Pour le cache j'avance:
document.getElementById('masuperimage').src = 'miniature.jpg?a=' + myDate.getTime();
Mais ce n'est pas encore çà

Code:

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
<SCRIPT language="JavaScript" type="text/javascript">
 
function ChangerImage(){
  	//window.location.href = "random_picture.php";
    //document.getElementById("masuperimage").innerHTML='<img src="miniature.jpg"/>';
    //document.getElementById("masuperimage").src = "miniature.jpg";
	//window.location.reload()	
   //var x=1;
   var xhr = getXhr();
   // On défini ce qu'on va faire quand on aura la réponse
 	xhr.open("POST","random_picture.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, tes 4 valeurs de départ à savoir : el1,el2,el3 et la nouvelle el4
   xhr.send(null);
 
  xhr.onreadystatechange = function(){
      // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      if(xhr.readyState == 4 && xhr.status == 200){
         // Ici on va voir comment faire du post
          document.getElementById('masuperimage').src = 'miniature.jpg?a=' + myDate.getTime();
      }
   }
 
   setTimeout("ChangerImage()", 7000) 
	x++;
}   
 
    //fonction pour préparer les appels ajax
function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest) // Firefox et autres
      xhr = new XMLHttpRequest();
   else if(window.ActiveXObject){ // Internet Explorer
      try {
         xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      xhr = false;
   }
   return xhr;
}
 
</SCRIPT>

10/02/2017, 18h48
badaze

Il faudrait que tu regardes des exemples de génération d'images avec php.

Quand on veut utiliser un script php pour qu'il renvoie une image il faut impérativement :
1 - qu'il n'y ait aucun espace ou saut de ligne avant le premier <?php
2 - qu'il y ait un header . Dans le cas d'une image jpeg => header('Content-Type: image/jpg');
3 - qu'il n'y ait aucun echo ou print ou print_r bref aucune sortie "écran".

Pourquoi n'essaies-tu pas le code que j'ai posté ? Il ne correspond pas exactement à ce que tu veux faire mais je pense qu'il te permettra de comprendre des choses.

Je viens de trouver la solution:

Code:

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
54
55
<!-- CONTENU -->
<div style="height:400px;  background-color: rgba(0,0,0,0.5);"> <!-- Modifiez height pour rÃ©gler la hauteur du cadre -->
<img onload="Boucle()" src="miniature.jpg" id="masuperimage" />
</div>
 
 
<SCRIPT language="JavaScript" type="text/javascript">
 
function ChangerImage(){
  	//window.location.href = "random_picture.php";
    //document.getElementById("masuperimage").innerHTML='<img src="miniature.jpg"/>';
    //document.getElementById("masuperimage").src = "miniature.jpg";
	//window.location.reload()	
   var xhr = getXhr();
   // On défini ce qu'on va faire quand on aura la réponse
 	xhr.open("GET","random_picture.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
   xhr.send(null);
 
  xhr.onreadystatechange = function(){
      // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      if(xhr.readyState == 4 && xhr.status == 200){
         // Ici on va voir comment faire du get
                 //alert("Votr...");
      }
   }
   	var myDate = new Date();
  	document.getElementById('masuperimage').src = 'miniature.jpg?a=' + myDate.getTime();
}
function Boucle(){
  setTimeout("ChangerImage()", 10000)
}
 
    //fonction pour préparer les appels ajax
function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest) // Firefox et autres
      xhr = new XMLHttpRequest();
   else if(window.ActiveXObject){ // Internet Explorer
      try {
         xhr = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      xhr = false;
   }
   return xhr;
}
 
</SCRIPT>

Merci pour votre aide ;)