Bonjour à tous,

Quelqu'un pourrait il m'aider ?
Je souhaiterais avoir ceci sur une page : une petite image du type vignette et quand on clique dessus, la même image en grand s'affiche à côté.
Mon problème n'est pas un problème de positionnement en CSS, mais carément le XHTML que je ne sais pas écrire !!!!



Merci d'avance à celui ou celle qui pourra me guider sur les instructions à écrire

Salut,

Ce n'est pas possible en utilisant seulement du html, tu va être contraint d'utiliser du JS, ou à la limite ce que tu peux faire et si ça peut te convenir, c'est lors du passage de ta souris sur ta miniature, faire un rollover en css pour l'affichage en taille réelle.

Hummm'vouai.... j'ai essayé avec le rollover (nombalise:hover)
mais dans ce cas là, la grande photo s'affiche à la place de la petite et au même endroit !!
hors, je voudrais conserver la vignette en visu d'un côté, et en cliquant dessus avoir la photo normale qui s'affiche ailleurs sur la même page !

Et avec l'instruction "onclick" quelqu'un aurait une idée ??? (si toutefois ça peut être une bonne idée !?)

up

Je sais pas si j'ai bien compris mais :


Avec ca tu affiche une petite image avec un lien cliquable qui te redirige vers la grande

Bonjour,
Merci Grunk ! ça marche sauf que

ça m'ouvre la grande image dans une nouvelle page.... hors je souhaite qu'elle soit sur la même page dans une zone placée par exemple à gauche, alors que la petite image serait dans une zone à droite et resterait visible

ha la s'est un autre problème , là comme ca j'ai pas trop d'idée , désolé

Y'a moyen sans JS il me semble!
Je vais aller faire ça et je te met une démo et la source (si j'y arrive, évidemment ...)

Donc j'éditerai

Oh ça serait super génia MadX ! car je galère complètement..

Comme je n'ai aucun succès avec ma question !!!! j'ai mis un autre post avec un exemple de site et du résultat que j'aimerais avoir : le post a comme titre ROLLOVER DISTANT - SWAP D'IMAGES.. va voir le lien, tu sauras comme ça ce que je veux obtenir exactement ! sauf que la source n'est pas interessante c'est tout en JS...

Même si j'arrive à faire marcher ma méthode, le js reste (malheureusement) la solution la plus pratique à mettre en oeuvre je pense.

Enfin, je vais quand même voir si ça marche ma technique (pour l'instant ça a pas l'air ... lol)

Ce n'est pas possible sans js.

Par contre un rollover d'une miniature qui affiche à coté l'image taille réelle est tout à fait possible en css.

Effectivement, si il faut cliquer, alors tu dois obligatoirement passer par JS (pour l'instant, peut être que css3 ... )

Sinon le rollover est effectivement faisable si c'est juste un hover (et facilement !)

voila ,c'est codé et testé tout chaud
(c'ets du JS bienentendu)

++ Tix.

Je vais tester le code Tix ! j'étais pas trop pour utiliser du JS mais si ça marche pourquoi pas !!!

Par contre.. si quelqu'un a une "trouvaille" avec le CSS, là je prend à 100% !
MadX peut être que ta solution marcherait ???

mais je suis preneuse aussi pour cette idée

Citation : strucky

Par contre un rollover d'une miniature qui affiche à coté l'image taille réelle est tout à fait possible en css.

La solution que Grunk m'a indiqué en début de post

serait "presque" parfaite si elle ne m'ouvrait pas une nouvelle fenêtre dans laquelle s'affiche l'image taille réelle !!!




Edite :
Je continue à chercher, de toute façon, de mon côté

Citation : Arthana

Citation : strucky

Par contre un rollover d'une miniature qui affiche à coté l'image taille réelle est tout à fait possible en css.

Quelques exemples :

http://www.cssplay.co.uk/menu/old_master.html
http://www.cssplay.co.uk/menu/gallery.html
http://www.cssplay.co.uk/menu/code.html
http://www.cssplay.co.uk/menu/hover_click.html

Citation : Arthana

Je me demande s'il n'y a pas une idée à creuser de ce côté là avec des div ??? un pour la vignette, l'autre pour l'image réelle ???

Ce n'est pas possible de cette façon, encore si IE gérait tous les sélecteurs et les hover autres que sur <a>, ça aurait été je pense faisable, mais ce n'est pas le cas.

mais si tu veu ac le code JS que j'té filé ,tu peu parfaitement mettre ton image ou tu veu et les vignettes ailleur ...

Tix ! j'ai testé ton code...
ça marche mais comme je n'y connais rien en JS je ne sais pas quoi modifier comment pour que ça me donne ce que je veux !
Le résultat tel que me donne 3 images l'une à côté de l'autre :
la première, est la grande image.. mais elle s'affiche en taille vignette
les deux autres sont les vignettes.. j'ai modifié la taille width pour adapter (chacune ne fait pas tout a fait le même nombre de pixels) et elles sont collées contre la première image alors que je les voudrais à l'autre bout de la page !

En fait, toutes mes images ont des tailles différentes ! bien sûr, je réduis de façon à ce que tout soit à peu près identique mais ce n'est pas toujours faisable au pixel près entre la largeur et la hauteur !

Struky, merci pour les adresses : je vais aller voir ça de plus près.

------

Edite :
Trix ! après essai supplémentaire, c'est OK je gère les vignettes et leur emplacement avec le CSS !
mais l'image taille réelle "NIET" !

Edite 2 :
Struky ! d'enfer tes liens..... je vais me faire les tutos tranquillement ! mais je n'avais pas totalement tord ! le gars passe par des listes à puces, des containers (div) et des hover...
C'est pas mal comme rendu aussi le système du rollover distant sans clic !

Bon il faut que j'arrive à mettre en oeuvre les deux techniques (CSS et JS) pour comparer le résultat et en choisir une au final !
Juste le JS à affiner encore Tix !!!!

Merci en tous cas à vous deux pour votre aide ! c'est super
dommage qu'il manque un smiley "bisou"...

lol drien



tu peu placer <img src="noimg.gif" id="Bigimg"> ou tu veu ,indépendament des vignettes (sur la meme page :p)

quant à la taille ,ca ne peu pas venir du script JS car aucune information n'est donnée à ce sujet ,dans la fonction comme dans l'IMG elle meme o_O.les seules infos sur la taille sont celles des vignettes.

Peu etre à tu oublié une propriété CSS dans le coin?

Bonne continuation ++ Tix.

Tix ! tu devrais jeter un oeil sur ce site ! (c'est d'après les liens de Struky)

http://www.webreference.com/programming/css_gallery/index.html

c'est franchement top...il arrive a faire des galeries de photos tout en CSS avec des présentations différente.. OK y'a pas de "onclick" mais juste un survol d'image et hop !
Tout y est bien expliqué (mais en anglais) et y'a plus qu'à suivre les instructions.. enfin je pense ! mais je verrais ça de plus près demain maintenant


En ce qui concerne ton code JS, Tix, j'ai fait comme tu as dit déjà tout à l'heure en fait, juste changer le width des vignettes !
J'ai mis l'instruction


dans le head

et écrit dans la partie "corps de mon menu" l'instruction comme ça directement


Mes images sont en jpg au lieu de gif (ce qui ne change rien !)
et j'ai mis à la place de "noimg" le nom d'une de mes grandes images, car à l'appel de la page rien ne s'affichait ! comme ça j'ai une image par défaut et après on clic...
A l'ouverture de la page, la grande image est OK, mais après quand je clic sur l'autre vignette, tout se met "taille vignette" !

Je ne vois pas dans mon code où pourrait pêcher le CSS :

Je suis bien d'accord avec toi qu'aucune taille n'étant spécifiée pour la grande image, celle-ci devrait s'afficher "normale" quelque soit ses dimensions.. mais là franchement "ça l'fait pas" !!!
Décidémment, je suis pas douée pour le javascript on dirait......

je sait pk.

en fait tu à deux images. la grande et la petite (Apetit ,Agrand)

mon code récupere l'URL de l'image su laquelle on clique et remplace celle de la grande par cele ci. donc si tu veu que mon script marche ,il faudrait que les mignatures soit la MEME image que pour la grande ,mais réduite AVEC WIDTH et HEIGHT

donc si tu veu fonctionner ac deux types d'images ,il faut modifier mon code comme ca :



et tout devrais aller ....

bonne chance

++ Tix.

Bonjour Tix,

Ok je vois parfaitement ton "pourquoi et comment" et tes deux solutions du coup !
Je n'avais absolument pas pensé à ne charger qu'une seule grande image et la présenter en réduit avec les tailles !!! sic !
Ta première solution parait sympa pour favoriser un meilleur load.. sinon, je pense que je devrais mettre en preload toutes mes grandes images pour un affichage plus rapide avec la 2ème solution.

Bon, j'avoue que je n'ai pas eu le temps de tester ce matin, et que je ne pourrais le faire que ce soir. Mais ça me semble pouvoir me convenir parfaitement.
Je mets donc mon problème en résolu, quitte à le réouvrir si j'ai un blème !

Un grand et gros merci pour toute votre aide précieuse !