Image qui se change automatiquement

btguillaume -  
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   -
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 :





<html>

<head>
<script language="JavaScript"><!--
function refreshIt() {
if (!document.images) return;
document.images['myCam'].src = 'image.jpg' + Math.random();
setTimeout('refreshIt()',2000); // refresh every 2 secs
}
//--></script>
</head>

<body onLoad=" setTimeout('refreshIt()',2000)">

<img src="image.jpg" name="myCam">

</body>

</html>






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


A voir également:

15 réponses

Réponse 1 / 15
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
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(); 
 } 

?>
0
Réponse 2 / 15
btguillaume
 
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
0
Réponse 3 / 15
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
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
0
Réponse 4 / 15
btguillaume
 
Et je procède comment pour la requête xhr?
0

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

Posez votre question
Réponse 5 / 15
btguillaume
 
Avec AJAX peut-être?
Je fouille sur le web pour voir...
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
oui c'est un principe ajax

XmlHttpRequest
0
Réponse 6 / 15
btguillaume
 
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
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
le but est de faire une requête valide sur un petit fichier par exemple

test.php avec comme contenu : 
1


ce qu'il faut récupérer ce n'est pas le contenu mais le code de réponse http donc inutile de faire pointé sur un fichier qui a plus de contenu que ça, ça ne ferait qu'augmenter l'utilisation de bande passante

je pourrais te faire un exemple demain là je suis épuisé
0
Réponse 7 / 15
btguillaume
 
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
0
Réponse 8 / 15
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
ca marche avec n'importe quel fichier même un fichier sans extension

tu peux écrire 1 dans un fichier txt
0
btguillaume
 
Mais, je fais comment le code? J'ai essayé quelque code que j'ai modifié sur le net mais je crois que j'ai pas le bon matériel.


Quel attribut de fonction faut-il prendre? loadimage? faire un load, error ???


Je travail avec ce début est-ce bon? 



function Quelle fonction mettre ici?()
{ 
    var xhr; 
    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e) 
    {
        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
        catch (e2) 
        {
           try {  xhr = new XMLHttpRequest();  }
           catch (e3) {  xhr = false;   }
         }
    }
  
    xhr.onreadystatechange  = function() 
    { 
       if(xhr.readyState  == 4)
       {
        if(xhr.status  == 200)






Merci:)
0
Réponse 9 / 15
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
  
<!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>
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
essai ça avec un fichier test.php a la racine du serveur http qui contient juste 1
et il faut changer avec l'url des image a la place de greencircle et redcircle

la frequence a la place de 1000
0
btguillaume
 
Mon webserver ne supporte pas le php , ya til un autre moyen?
0
btguillaume
 
Okay oubli pour le php si c'est sur mon site web c'est okay.

J'ai testé un truc, quand je change le fichier test.php dans le code pour disons un autre qui n'existe pas, j'ai des résultats différents si les images de :

('img','greencircle.png','redcircle.png',1000);

son situé dans les fichiers du webserver ça fonctionne pas, limage ne change pas
mais
si je prend les mêmes images mais sur mon site web ça marche........

Il faut que les images se trouvent sur mon webser de la carte sinon ca donne rine ...

Je ne comprend pas et ca ne marche pas :P
0
btguillaume
 
Mais, qu'est-ce qui dit dans le code (place l'image ''A'' en premier et si tu ne réussis pas a avoir la requête du fichier ''test.php'' place l'image ''B'' )

Je vois bien imgT et imgF mais où on attribut l'image a son diminutif?

???



Edit: Je viens de comprendre..
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
peux importe que ca gère le php ou non j'ai mis une extension sur le fichier mais on peut mettre n'importe quoi tant qu'il n'est pas vide

pour les images
tu remplaces 'greencircle.png','redcircle.png' par les urls de tes images

1000 correspond a un test toutes les 1secondes

si tes images ou le fichier de test n'existe pas c'est sur que ça ne fonctionnera pas
0
Réponse 10 / 15
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
voilà un fichier zip encodé en base 64 

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
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
c'est une archive zip qui contient le code et les images

pour le récuperer tu peux copier le code dans une fichier txt

et utiliser ca 

	$a = file_get_contents('fichier.txt');
	$a = base64_decode($a);
	file_put_contents('test.zip',$a);


ce petit code php te recréera l'archive zip
0
rapide
 
salut ; les infos pour le zip (base64.zip) reconstitué sont :

2,76 Ko (2 833 octets)
2,76 Ko (2 833 octets)

CRC32: 4E52F962
MD5: 181FBBCCD87E54768E57BD8E341E8A71
SHA-1: 14D0CB1C885B36D1F0D99BE5D07FE2AE3AB1A211
SHA-256: A3CAC1E6CDE579EDF43A0B76129FB8BB98BA0637D4533A37DE4E876DC3643E69

Perso, j'ai utilisé ce site pour récupérer le fichier :

Base64 Online - base64 decode and encode :
http://www.motobit.com/util/base64-decoder-encoder.asp
0
Réponse 11 / 15
btguillaume
 
Mes messages ne se sont pas affrichés sur le forum?
0
Réponse 12 / 15
btguillaume
 
Atropa, quand es-tu disponible pour m'expliquer un truc?
0
Réponse 13 / 15
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
drôle de question sur un forum. que veux tu savoir ?
0
Réponse 14 / 15
btguillaume
 
mes post n'apparaît pas......??????????
0
Réponse 15 / 15
btguillaume
 
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?
0
Atropa Messages postés 1940 Date d'inscription   Statut Membre Dernière intervention   274
 
si ça ne fonctionne pas c'est que ton serveur apache n'est pas configuré comme il faut ou que le fichier test.php n'est pas a la racine du site
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Images mouvantes selon l'angle de vue
PoPoV123 -
oeildelynx -

9 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses