Diaporama miniature où les images sont agrandies par une fonction javascript

Bonjour,

c'est pour avoir des conseils svp.

je débute en javascript, dans mon html j'ai

Code:

---

1 2 3

<a href="#" ><img src="loups/loup1.jpg" onclick="afficheImage()" /></a> <a href="#" ><img src="loups/loup2.jpg" onclick="afficheImage(')" /></a> ...

---

dans mon css, ça me réduit l'image à 50x50px, et une fois cliquée, la fonction javascript l'agrandit au centre de la page.

Et dans mon script j'ai mis

Code:

---

document.write('<div class="imageCentre"><img src="loups/loup1.jpg"/></div>');

---

Bien entendu ça ne donne pas du tout ce que je veux.

ps : c'est un test, je sais que ça affichera toujours la même image, mais je mettrai des variables par la suite et un paramètre à la fonction.

J'ai l'image qui s'affiche environ une seconde et qui part, et lorsqu'elle s'affiche, elle s'affiche sur une fenêtre vierge, alors que je voulais qu'elle s'affiche au milieu du tout.

Question, dois je faire passer tout le code html dans la fonction javascript?

J'ai du mal à concevoir la chose en fait, si vous pouvez me faire part de votre conception à ce sujet.

Merci.

Code:

---

<img src="loups/loup1.jpg" onclick="afficheImage(this.src)" style="cursor:pointer;" />

---

colle ce code sur la page

Code:

---

1 2	<div class="imageCentre" style="display:none"><img src=""/></div>

---

et dasn ta fonction tu attribues le src pasé en paramètre à la blaise image
et tu modifies le display du div ...

Merci, je pense avoir saisi le principe, j'ai fait de multiples tests, il se peut que ma syntaxe soit fausse, pour l'instant ça ne donne rien.

Dans le script (placé dans le head) j'ai mis

Code:

---

1 2 3 4

function afficheImage(source){ document.images[0].src = source; getElementById('imageCentre').style.display=block; }

---

Et dans le html j'ai mis

Code:

---

<div id="imageCentre" style="display:none"><img src=""/></div>

---

et dans les images miniatures, j'ai bien modifié en mettant "this.src".

Quand je fais un alert de document.images[0].src;

Il me renvoie l'url de la page web, alors que je pensais qu'il me renverrait l'url de l'image. Est-ce normal?

Là je m'embrouille...

J'ai débuggé un peu avec des alert, je récupère bien les sources des images, j'ai quelque peu modifié le code :

ça je pense que c'est bon :

Code:

---

1 2	var mesimages = document.getElementsByTagName("img"); mesimages[0].src=source;

---

quand je fais un alert de mesimages[0].src, j'ai la bonne url

Le soucis c'est que le block est défini à none, et là ma ligne de code ne doit pas marcher :

Code:

---

getElementById('imageCentre').style.display='block';

---

La syntaxe sur le net, j'ai trouvé ça, donc je pense que c'est bon. Je ne sais pas ce qui bloque

Code:

---

="block";

---

Merci. ça marche enfin merci beaucoup.

Seule petite interrogation, c'était pas la peine de mettre le display en block, étant donné qu'aucune source initiale était définie, car on avait mis src="".

Mais je voulais savoir si le display mis à none cache l'image mais la charge quand même donc en réservant une place où on ne voit que du blanc, où bien si ça n'affiche rien du tout, et dans ce cas ça décale tout les autres éléments.

Sinon j'ai fait sans getElementById('imageCentre').style.display="block";

Par contre, maintenant, je vais essayer de récupérer la 1ère image afin qu'elle soit affichée par défaut.

Là c'était des exemples avec des images stockées dans un dossier, mais à la fin je vais devoir utiliser des images stockées dans une bdd, donc je prendrai des variables, j'espère que cela ne causera pas trop de problèmes.

En attendant je mets le sujet en "résolu", si besoin est je le réactiverai.

Merci pour ton aide !

display none retire l'objet du flux ... sa place n'est pas reservée ...

visibility hidden masque l'objet mais le conserve dans le fux
(basculer en visibility="visible" )

ok j'ai eu ma réponse concernant display none, ça n'affiche rien et ne charge rien. C'est la propriété hidden qui cache mais charge l'image quand même.

On a répondu en même temps. C'est ce que j'ai pu constater aussi. Merci.

mon 22 222 eme post pour dire :lahola:

attention le display est sur le div ...
l'image est tout de même chargée malgré le display none du div

ah ok, pour une fois où ça aurait pu être simple, ben non.

et Félicitations ! Tu as dû en aider des personnes en perdition comme moi ! :D

pourquoi simple ?

l'image chargée n'est pas visible ça ne change pas grand chose en soi...

Citation:

---

et Félicitations ! Tu as dû en aider des personnes en perdition comme moi !

---

Merci...
j'ai aussi posé beaucoup de questions :mouarf: