css bouton qui affiche une image

[vector]

Re- bonjour...
J'avance dans mon apprentissage css..
J'aimerais juste savoir s'il est possible qu'une image en cliquant dessus puissent faire apparaitre une autre image ailleurs suee la meme page ?
Je voudrais éviter de faire 30 pages différentes pour afficher toutes mes photos, la petite vignette en bas de page doit (au clic) affiche une image dans la zone arrondit au fond couleur écru à gauche.

voir l'exemple
Merci

 

[Benjamin D.C.]

Tu devras recourir à JavaScript pour réaliser une galerie de ce type. Tu peux par exemple te baser sur mon tuto jQuery, ça semble proche du résultat que tu souhaites obtenir.

 

[vector]

merci..
ça a l'air complexe ton truc non ? c'est super beau mais plus simple ça existe pas ?

 

[Gz']

tu peux la faire comme ça :
un bloc <div id=photo>
</id>

au centre

Et sur chacun de tes miniatures du dessous :

<img src="tonimageMiniature.jpg" alt="tag alt" onclick="document.getElementById('photo').innerHTML = '<img src=\"tonImageTailleNormale\"  alt=\"tag alt\" />' " />

C'est moche et peu pratique, mais on peut pas faire plus simple je pense.

 

[vector]

:love:
J'ai réussi à faire la galerie de Benjamin D.C. ! Vraiment génial le résultat, ah je suis contente...!

Et là je me demandais...si je rajoutais un texte à côté de chaque image qui apparaît en grand ?
Qui a une solution (avec la galerie de Benjamin D.C. biensûr !)

Merci beaucoup

 

[sabearts]

C'est peut-être moins beau car sans fondu, mais il est très possible de le faire en css pur, le code sera bien plus simple. Un tuto bien fait où tu peux remplacer "hover" par "active" et c'est tout.

Mais c'est vrai, c'est un petit peu moins 'classe'.

 

[Benjamin D.C.]

C'est peut-être moins beau car sans fondu, mais il est très possible de le faire en css pur, le code sera bien plus simple. Un tuto bien fait où tu peux remplacer "hover" par "active" et c'est tout.

Mais c'est vrai, c'est un petit peu moins 'classe'.

Ce n'est pas seulement moins "classe", c'est surtout totalement incorrect et inaccessible. JavaScript est parfaitement adapté à ce besoin, et il n'y a aucune raison valable de s'en priver.

 

[sabearts]

Ok ok, je me suis peut-être un peu laissé emporter mais ce n'est pas complètement inimaginable.
C'est vrai que pour garder l'image visible (avec visited, pas active, décidément j'étais vraiment pas en forme) il faudra recharger la page en mettant l'adresse de la page dans le lien. Avec l'inconvénient que dorénavant la page s'ouvrira toujours avec cette grande image tant que le navigateur se souvient qu'on l'a visitée. Pas dingue en effet.

Donc non, en effet ce n'est pas la même chose, et mille excuses pour l'erreur de comm' (je n'ai pas dit que j'étais à Berlin il y a 20 ans quand même :siffle, mais ça permet au moins de façon simple voir les images en grand juste en glissant sur l'icône, non?

Loin de moi de nier la grande qualité de ton tutoriel et de ses résultats, ni les apports de JS... j'aime juste les codes simples, et je ne suis pas très versé JS par manque de temps, donc si je peux m'en passer j'essaie.:zen:

 

[Benjamin D.C.]

Ok ok, je me suis peut-être un peu laissé emporter mais ce n'est pas complètement inimaginable.
C'est vrai que pour garder l'image visible (avec visited, pas active, décidément j'étais vraiment pas en forme) il faudra recharger la page en mettant l'adresse de la page dans le lien. Avec l'inconvénient que dorénavant la page s'ouvrira toujours avec cette grande image tant que le navigateur se souvient qu'on l'a visitée. Pas dingue en effet.

Donc non, en effet ce n'est pas la même chose, et mille excuses pour l'erreur de comm' (je n'ai pas dit que j'étais à Berlin il y a 20 ans quand même :siffle, mais ça permet au moins de façon simple voir les images en grand juste en glissant sur l'icône, non?

Loin de moi de nier la grande qualité de ton tutoriel et de ses résultats, ni les apports de JS... j'aime juste les codes simples, et je ne suis pas très versé JS par manque de temps, donc si je peux m'en passer j'essaie.:zen:

Pas de soucis!
Tu devrais t'y mettre au JS, tu verras, c'est pas bien compliqué (bon, pour les choses de bases du moins ).