Image qui se change automatiquement Fermé

Question

Bonjour, J'ai une question pour les pros. En fait, je cherche un code qui fait afficher une image et que si cette image ne fonctionne pas ou que le lien est brisé, une autre la remplacera et le tout en se rafraîchissant automatiquement. J'ai ça ici :

Ici c'est cool l'image se rafraîchit automatiquement en changent la variable du temps. Pour le changement d'image en cas de lien brisé, j'ai essayé plein de petits codes qui non pas portés fruit. Du genre, une image en background qui est cachée par l'image pricipale. Et que si l'image principale ne fonctionne pas, l'image de background apparait. Avez-vous une idée pour mon problème? Merci, Guillaume Configuration: Windows 7 / Internet Explorer 9.0

Atropa · Answer

bonjour, 

c'est étrange d'avoir un nombre aléatoire a la fin de la source d'une image 
c'est pour ça que tes liens se brise 

si tu veux une image qui change aléatoirement le plus simple c'est de lier ça a un fichier php 

tu modifie la source de ton image par image.php 

document.images['myCam'].src = 'image.php?r=' + Math.random(); 

et enfin le fichier image.php 

<?php 

 $dossier = 'dossier/content/images'; /* dossier contenant les images */ 
 $ext = array('jpg','jpeg','png','gif','svg'); /* extensions autorisées */ 

 if(substr($dossier,-1) != '/') $dossier .= '/'; 
 $t = scandir(realpath($dossier)); /* je ne sais plus si realpath fonctionne sur les dossiers, si ça fonctionne ça t'évitera de devoir donner l'adresse canonique */ 

 $nbItem = count($t); 
 $ind = mt_rand() % $nbItem; 
 $valEnd = ($ind > 0)? $nbItem - 1 : $ind - 1; 

 for($i = $ind; $i != $valEnd;$i++) { /* si aucun fichier n'est trouvé après les avoir tous regarde, arret du script */ 
  if($i == $nbItem) $i = 0; 
  if(!isset($t[$i])) exit(); 
  if($t[$i] == '.' || $t[$i] == '..') continue; 
  $fext = strtolower(strrpos($t[$i],'.'); 
  if(!in_array($fext),$ext) continue; 
  $type = 'image/'; /* Pour le type attention que ça fonctionne si tu change les extensions autorisé */ 
  if($fext == 'jpg') $type .= 'jpeg'; 
  else if($fext == 'svg') $type .= 'svg+xml'; 
  else $type .= $fext; 
  header('Content-type: '.$type); 
  readfile($dossier.$t[$i]); 
  exit(); 
 } 

?>

btguillaume · Answer

En fait je vais t'expliquer mon projet. 

J'ai un petit module incluant un webserver qui contrôle des relais. Dans ce module (carte programmable), je veux une icone ou un texte qui indique si la carte est branchée à internet ou seulement au réseau locale pour d'éventuelles diagnostiques et aussi pour informer l'utilisateur que certaines fonctions sont indisponibles puisque que la connectivité internet n'est pas disponible. Je voudrias quelque chose de tout simple et vu que je ne connais pas beaucoup le html et les scripts, j'avais pensé à cette astuce d'image toute simple. Une image qui viendrait directement des fichiers de la carte,  ("/macarte/images/x_rouge.jpg") pour indiquer la NON connectivité à internet ou au réseau locale seulement et un image venant de mon site web, ("http://monsiteweb.com/images/crochet_vert.jpg") pour indiquer la connectivité à internet.

L'image serait remplacée à exactement la même endroit sur la page. Peut être aussi utiliser la fonction map pour les coordonnées de l'image?

Aussi il faut que l'image cherche à être rafraîchit tous les ''X'' secondes pour que le système soit juste et précit. J'ai pensé au rafraîchissement de l'image uniquement pour que le tout reste transparent aux yeux de l'utilisateur.

Qu'en pensez-vous?

S'il y d'autre façon de faire je suis ouvert aux suggestions!

Merci de votre aide!
Guillaume

Atropa · Answer

le plus simple c'est de précharger les 2 images et de faire une requête xhr tout les n secondes

si une erreur survient la requête n'aboutit pas changer d'image

je pensai que tu voulais des images aléatoires dans une liste

btguillaume · Answer

Et je procède comment pour la requête xhr?

btguillaume · Answer

Avec AJAX peut-être?
Je fouille sur le web pour voir...

btguillaume · Answer

okay ça l'aire complex un peu, le but est de faire une requete sur une image à tous les ''X'' secondes? 

Ou le principe est différent. En le sachant je pourrai fouiller pour un début de code sur le web, merci

btguillaume · Answer

Ouais okay je vois, pas de trouble. Mon webserver ne prend pas en charge le php . Du moins je crois, je fait des tests et le php n'a pas l'aire d'être prit en charge.


Guillaume

Atropa · Answer

ca marche avec n'importe quel fichier même un fichier sans extension

tu peux écrire 1 dans un fichier txt

Atropa · Answer

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<script type="text/javascript">

	function XHR() {
		var requete = null;
		try { requete = new XMLHttpRequest(); }
		catch (microsoft) {
			try { requete = new ActiveXObject('Msxml2.XMLHTTP'); }
			catch(autremicrosoft) {
				try { requete = new ActiveXObject('Microsoft.XMLHTTP'); }
				catch(echec) { requete = null; }
			}
		}
		if(requete == null) alert('Votre navigateur ne semble pas supporter les object XMLHttpRequest.');
		return requete;
	}

	function tester(id,srcT,srcF,frequency) {
		var imgT = document.createElement('img');
		var imgF = document.createElement('img');
		imgT.width = 16;
		imgT.height = 16;
		imgF.width = 16;
		imgF.height = 16;
		imgT.src = srcT;
		imgF.src = srcF;
		document.getElementById(id).appendChild(imgT);
		document.getElementById(id).appendChild(imgF);
		imgF.style.display = 'none';
		setInterval(function() {
			var Xhr = new XHR();
			Xhr.open('get','/test.php',true);
			Xhr.send('');

			Xhr.onreadystatechange = function () {
				if(Xhr.readyState != 4) return false;
				if(Xhr.status == 200) {
					imgT.style.display = 'block';
					imgF.style.display = 'none';
				}
				else {
					imgT.style.display = 'none';
					imgF.style.display = 'block';
				}
			}
		},frequency);
	}

	</script>
</head>
<body>

<div id="img"></div>
<script>
tester('img','greencircle.png','redcircle.png',1000);
</script>
</body>
</html>

Atropa · Answer

voilà un fichier zip encodé en base 64

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

btguillaume · Answer

Mes messages ne se sont pas affrichés sur le forum?

btguillaume · Answer

Atropa, quand es-tu disponible pour m'expliquer un truc?

Atropa · Answer

drôle de question sur un forum. que veux tu savoir ?

btguillaume · Answer

mes post n'apparaît pas......??????????

btguillaume · Answer

Non ton code ne fonctionne toujours pas, avec IE9 et chrome les résultats sont différents, y-a-t'il pas moyen de faire ce genre de projet mais avec un ping server lancé sous java?

envoie un ping, si le ping se rend faire apparaître l'image, sinon faire apparaître l'autre?

Image qui se change automatiquement

15 réponses

Discussions similaires