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

**Marc22** · 17/02/2010, 15h23

Bonjour,

c'est pour avoir des conseils svp.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 17/02/2010, 15h36

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

colle ce code sur la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**Marc22** · 17/02/2010, 15h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**Marc22** · 17/02/2010, 16h08

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...

**Marc22** · 17/02/2010, 16h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 17/02/2010, 16h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

="block";

**Marc22** · 17/02/2010, 16h44

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 !

**SpaceFrog** · 17/02/2010, 16h49

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" )

**Marc22** · 17/02/2010, 16h49

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.