[Résolu] Afficher une image au survol d'une zone

Bonsoir
J'ai actuellement une page qui présente l'aspect suivant:
http://jeanpierre.moularde.free.fr/www/images/Concerts.png

(à propos, comment fait on pour insérer une image dans un message de ce forum?)

J'aimerais que lorsqu'on survole les vignette je puisse afficher au dessous de la vignette la même image en plus grand sans décaler les lignes suivantes.
Ma technique actuelle pour faire ce genre de fioriture consiste à faire une fonction JS qui positionne correctement une div position:absolute avec le bon contenu, et à cacher cette div quand la souris sort de la zone contenant l'image.
Je soupçonne qu'il doit y avoir un moyen plus simple d'obtenir le même résultat.
Quelqu'un a-t-il une solution?

Merci de votre aide
Modifié par PapyJP (16 Dec 2014 - 19:35)

Bonsoir, on peut s'en sortir avec un :hover

Cependant, toutes les grandes images seront probablement chargées sur la plupart des navigateurs. Utiliser du javascript pour ne charger la grande image que sur demande reste valide.

http://codepen.io/anon/pen/myEJvQ

PapyJP a écrit :
(à propos, comment fait on pour insérer une image dans un message de ce forum?)

http://baconmockup.com/300/200
[ img ]http://baconmockup.com/300/200[ /img ]
Sans les espaces

Ou «joindre une image» pour l'héberger sur le forum (le lien à la ligne précédente du bouton envoyer)
Modifié par kustolovic (16 Dec 2014 - 22:42)

kustolovic a écrit :
Ou «joindre une image» pour l'héberger sur le forum (le lien à la ligne précédente du bouton envoyer)

Merci.
"Joindre une image" affiche une miniature indéchiffrable; c'est ce que j'ai commencé par faire mais c'était trop petit. Ensuite j'ai mis l'image sur un site de test et je n'arrivais pas à l'afficher.
http://jeanpierre.moularde.free.fr/www/images/Concerts.png
Edit: voilà, c'est fait!

Pour le reste j'en reste au bon JS des familles. Voir http://www.alma-musica.net/html/concerts.php
Comment faire un :hover sur une div qui en fait afficher une autre qui ne peut être que location:absolute? Ça sort de mes compétences. Je ne sais le faire que si la div à afficher est à l'intérieur de celle sur laquelle je mets le :hover. Si quelqu'un peut me donner un exemple qui marche je suis preneur. J'ai peu d'images et elles ne sont pas très grosses, donc les charger sans qu'elles s'affichent ne serait pas vraiment un problème.
Modifié par PapyJP (17 Dec 2014 - 11:49)

a écrit :
"Joindre une image" affiche une miniature indéchiffrable; c'est ce que j'ai commencé par faire mais c'était trop petit. Ensuite j'ai mis l'image sur un site de test et je n'arrivais pas à l'afficher.

Une miniature seulement si la case «générer une miniature» est cochée.

Pour le reste j'ai mis en exemple en lien sur le post précédent: http://codepen.io/anon/pen/myEJvQ

kustolovic a écrit :

Une miniature seulement si la case «générer une miniature» est cochée.
Pour le reste j'ai mis en exemple en lien sur le post précédent: http://codepen.io/anon/pen/myEJvQ

Merci Kusto ,mon iPad refuse d'afficher l'exemple. Je regarderai demain sur mon PC.
Edit: codepen affiche "CodePen is having health issues" ce matin. J'essaierai plus tard

Concernant l’importation d'image, voilà ce que ça donne, sans demander de miniature :

Il faut cliquer dessus pour voir le contenu. Pas terrible!
Modifié par PapyJP (17 Dec 2014 - 11:47)

Merci Kusto

Je n'avais pas réalisé que si on mettait une image en position:absolute; dans une div relative elle peut déborder de cette div sans pour autant en changer la taille!
Et pourtant cela belle lurette que j'ai fait des applications utilisant des position:absolute dans des div relative.
Voilà ce que c'est que se retrouver tout seul face à son écran et son clavier, sans personne avec qui échanger...