code pour actualiser une image....

10 août 2009, 20:46

bonjour a tous,
je souhaiterai un code (html, php, javascript, peu importe) pour pouvoir afficher aléatoirement une image (qui se trouve dans un répertoire avec toutes ses copines

) avec en dessous un bouton qui actualise seulement l'image (et non la page) et qui fonctionne sous ie et firefox...!
ne suis je pas trop exigeant ?!!!!
voici mon code : il est tres bien excepté qu'il actualise toute la page et je ne veux pas !!!


<script language="javascript">
<!--
document.write("<img src='photos/" + parseInt(Math.random()*95) + ".jpg' alt='Cliquez'>");     // les images sont dans le dossier photos et sont au nombre de 96 (en comptant celle qui s'appelle 0.jpg)

//-->
</script></a>
<br>

<center><input type="button" value="Voir une autre image" name="url" onclick="history.go(0)">  // bouton actualisation mais pas l'image !!!!!!!!!

si qq1 a une idée....... merci les gars !

10 août 2009, 22:00

Pour automatiser le principe je ferais :

1/ Listage du répertoire photo et enregistrement du résultat dans un tableau php.

2/ Transmission du tableau php à javascript avec json_encode.

3/ Affichage aléatoire d'une photo du tableau js en mémorisant son index.

4/ Boutons de navigation pour afficher précédent - suivant en fonction du numéro d'index en court.

11 août 2009, 19:46

salut ab,
ouais ok mais comment tu fais ça????????!!!!!!!!!!!!!!!

11 août 2009, 19:46

mon code je le trouvais tres bien excepté pour le rafraichissement de la page et non de l'image....!!!!

11 août 2009, 22:23

C'est le "excepté" qui fait la différence

Tu peux passer les deux premières étapes que j'ai indiquées, reste les deux suivantes et faut coder.
Pas le temps de t'expliquer en détail, mais sur le principe on peut changer la source d'une image via javascript (donc sans rechargement de la page) en utilisant le DOM. Par exemple :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">

function change_im(image) {
 
  if (this.conteneur = document.getElementById('image_content')) 
  {
	this.conteneur.src = image;  
  }
}

</script>

</head>

<body>
<div>
<p>
<img id = "image_content" src="image_par_defaut.jpg" alt="" />
</p>
<span style="cursor:pointer" onclick="change_im('image1.jpg');">Image n°1</span> 
<span style="cursor:pointer"  onclick="change_im('image2.jpg');">Image n°2</span>
</div>
</body>
</html>

12 août 2009, 00:43

Bonjour

Il serait peut-être plus simple de changer l'image directement en cliquant dessus :

Code : Tout sélectionner

<img src="0.jpg" title="Cliquez sur l'image pour la changer" alt="" onclick="this.src=this.alt='photos/'+parseInt(Math.random()*95)+'.jpg';" />

12 août 2009, 04:11

Bonjour

Il serait peut-être plus simple de changer l'image directement en cliquant dessus :

Code : Tout sélectionner
<img src="0.jpg" title="Cliquez sur l'image pour la changer" alt="" onclick="this.src=this.alt='photos/'+parseInt(Math.random()*95)+'.jpg';" />

Oui effectivement, j'étais parti sur des boutons "suivants" et "précédents" mais s'il ne souhaite toujours que des images tirées au hasard c'est le plus simple.
Une variante avec un bouton pour changer l'image de manière aléatoire :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">

function change_im() {
 
  if (this.conteneur = document.getElementById('image_content')) 
  {
	var photo = 'photos/'+parseInt(Math.random()*95)+'.jpg';
	this.conteneur.src = photo;
  }
}

</script>

</head>

<body onload="change_im()">
<div>
<p>
<img id = "image_content" src="" alt="" />
</p>
<input type="button" onclick="change_im()" value = "rafraichir" />
</div>
</body>
</html>

12 août 2009, 14:31

salut les gars,
merci pour vos réponses.
ab j'ai retenu ta derniere soluce.
celle ci fonctionne tres bien EXCEPTE

que je veux mettre 2 fois ce script sur la meme page mais impossible !
j'ai essayé d'en créer un 2eme (qui s'appelle function change_im2() ) mais ce 2eme script ne fonctionne pas !
j'ai pourtant mis dans body : <BODY onload="change_im()" onload="change_im2()">

me suis je trompé?
merci

12 août 2009, 15:11

Il faut rajouter un paramètre qui indique d'id concerné à la fonction change_im() :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">

function change_im(id) {

  if (this.conteneur = document.getElementById(id))
  {
   var photo = 'photos/'+parseInt(Math.random()*95)+'.jpg';
   this.conteneur.src = photo;
  }
}

</script>

</head>

<body onload="change_im('image_content');change_im('image_content2')">
<div>
<p>
<img id = "image_content" src="" alt="" />
</p>
<input type="button" onclick="change_im('image_content')" value = "rafraichir" />
</div>
<div>
<p>
<img id = "image_content2" src="" alt="" />
</p>
<input type="button" onclick="change_im('image_content2')" value = "rafraichir" />
</div>
</body>
</html>

12 août 2009, 15:20

tu vas surement me trouver"relou"!!!! mais l'autre image va pointer vers un autre dossier : photos2......

12 août 2009, 15:32

Ben alors tu passe le dossier en paramètre également, ça sert à ça les fonctions :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">

function change_im(id,dossier) {

  if (this.conteneur = document.getElementById(id))
  {
   var photo = dossier+'/'+parseInt(Math.random()*95)+'.jpg';
   this.conteneur.src = photo;
  }
}

</script>

</head>

<body onload="change_im('image_content,'photo');change_im('image_content2,'photo2')">
<div>
<p>
<img id = "image_content" src="" alt="" />
</p>
<input type="button" onclick="change_im('image_content','photo')" value = "rafraichir" />
</div>
<div>
<p>
<img id = "image_content2" src="" alt="" />
</p>
<input type="button" onclick="change_im('image_content2','photo2')" value = "rafraichir" />
</div>
</body>
</html>

12 août 2009, 15:37

voila ce que j'ai mis :

<head>
<script type="text/javascript">

function change_im() {

  if (this.conteneur = document.getElementById())
  {
   var photo = 'photos/'+parseInt(Math.random()*128)+'.jpg';
   this.conteneur.src = photo;
  }
}

</script>

<script type="text/javascript">

function change_im(id) {

  if (this.conteneur = document.getElementById(id))
  {
   var photo = 'photos2/'+parseInt(Math.random()*301)+'.jpg';
   this.conteneur.src = photo;
  }
}

</script>
</HEAD>


<body onload="change_im('image_content') ; change_im('image_content2')">


<div>
<p>
<img id = "image_content" src="" alt="" />
</p>
<input type="button" onclick="change_im(image_content)" value = "actualiser" />
</div>



<div>
<p>
<img id = "image_content2" src="" alt="" />
</p>
<input type="button" onclick="change_im(image_content2)" value = "actualiser" />
</div>

12 août 2009, 15:54

Pas beau

et ta première fonction ne fonctionnera pas. L'était trop simple ma solution ?

12 août 2009, 16:14

Modération :
Afin d'améliorer la lisibilité de ton message,
pense à utiliser les balises [code] ou [php] (selon le langage utilisé).

Elles sont disponibles au-dessus de la zone de saisie de ton message
lorsque tu postes un nouveau message.

Des indications sont disponibles sur la manière de mettre en forme vos messages dans la FAQ

12 août 2009, 16:24

ça ne fonctionne pas

, il n'y a rien qui s'affiche maintenant !

code pour actualiser une image....

Qui est en ligne