Changement d'image toutes les 5s

**peofofo** · 09/02/2017, 22h31

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 :

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

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

**badaze** · 09/02/2017, 23h18

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

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

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

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

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' />";
?>

**eleydet** · 10/02/2017, 11h56

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

**peofofo** · 10/02/2017, 12h37

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 :

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

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

**badaze** · 10/02/2017, 12h48

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 ?

**SpaceFrog** · 10/02/2017, 13h05

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

Changement d'image toutes les 5s

JavaScript

Vue hybride

Discussions similaires

Partager

Partager