J'ai une petite galerie de vignettes. Lorsque je place le pointeur de la souris sur une image miniature, je voudrais avoir une image en taille réelle dans un div en haut à droite de l'écran. J'ai vu cela fait en utilisant juste CSS et je voudrais descendre cette route plutôt que d'utiliser javascript si possible.Comment faire pour afficher une image dans une div séparée sur le passage de la souris d'un div en utilisant uniquement CSS?
Pure CSS Popups2, à partir du même site qui nous apporte Complexspiral. Notez que cet exemple utilise des liens de navigation réels en tant qu'élément rolled-over. Si vous ne le voulez pas, cela peut provoquer une certaine rigidité concernant les versions d'Internet Explorer.
La technique de base est de coller chaque image dans une balise de lien avec un href réel (Sinon, certaines versions IE négligeront: vol stationnaire)
<a href="#">Text <img class="popup" src="pic.gif" /></a>
et le positionner en utilisant intelligemment position absolue. Masquer l'image initialement
a img.popup { display: none }
puis de le faire apparaître sur le lien.
a:hover img.popup { display: block }
C'est la technique de base, mais il y aura toujours des limites importantes de positionnement depuis la balise d'image demeure dans la balise de lien. Voir le lien pour plus de détails il utilise quelque chose d'un peu plus délicat que l'affichage: aucun pour cacher l'image.
La démo Pure CSS Popups 2 d'Eric Meyer semble assez similaire à ce que vous voulez.
Voici quelques exemples:
Ce dernier agit sur un clic. Juste pour être complet dans les comportements.
CSS PlaygroundCSS Playground utilise un CSS pur pour ce genre de chose, l'un des démos est sûrement pour vous aider et comme tout CSS affiche la source à apprendre - vous voulez probablement utiliser la pseudo-classe: hover mais il y a des limitations en fonction du ciblage de votre navigateur.
Vous devriez probablement aller avec Javascript si la compatibilité du navigateur est importante. –