Page 1 sur 3
code pour actualiser une image....
Posté : 10 août 2009, 20:46
par chrismim
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 !
Re: code pour actualiser une image....
Posté : 10 août 2009, 22:00
par AB
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.
Re: code pour actualiser une image....
Posté : 11 août 2009, 19:46
par chrismim
salut ab,
ouais ok mais comment tu fais ça????????!!!!!!!!!!!!!!!
Re: code pour actualiser une image....
Posté : 11 août 2009, 19:46
par chrismim
mon code je le trouvais tres bien excepté pour le rafraichissement de la page et non de l'image....!!!!
Re: code pour actualiser une image....
Posté : 11 août 2009, 22:23
par AB
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>
Re: code pour actualiser une image....
Posté : 12 août 2009, 00:43
par FredoMkb
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';" />
Re: code pour actualiser une image....
Posté : 12 août 2009, 04:11
par AB
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>
Re: code pour actualiser une image....
Posté : 12 août 2009, 14:31
par chrismim
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
Re: code pour actualiser une image....
Posté : 12 août 2009, 15:11
par AB
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>
Re: code pour actualiser une image....
Posté : 12 août 2009, 15:20
par chrismim
tu vas surement me trouver"relou"!!!! mais l'autre image va pointer vers un autre dossier : photos2......
Re: code pour actualiser une image....
Posté : 12 août 2009, 15:32
par AB
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>
Re: code pour actualiser une image....
Posté : 12 août 2009, 15:37
par chrismim
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>
Re: code pour actualiser une image....
Posté : 12 août 2009, 15:54
par AB
Pas beau
et ta première fonction ne fonctionnera pas. L'était trop simple ma solution ?
Re: code pour actualiser une image....
Posté : 12 août 2009, 16:14
par zeus
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
Re: code pour actualiser une image....
Posté : 12 août 2009, 16:24
par chrismim
ça ne fonctionne pas
, il n'y a rien qui s'affiche maintenant !
