Pure CSS voodoo.
Aujourd'hui, j'ai fait du CSS. Super non ? Matt.rixx est en train de développer un gestionnaire de galleries photos, et pour utiliser les fonctions de redimensionnement des images intégrées aux navigateurs modernes (firefox et IE nottament proposent cette fonctionnalitée), il affiche les images dans une frame. Les frames c'est mal. Je me suis donc attelé à la réalisation d'un effet de zoom en pure CSS. Après plusieurs secondes d'intense réflexion (les médisants qui étaient présents diront que j'y ai passé quelques minutes, mais c'était sans compter les appels incessants de mes camarades de classe), j'ai pondu ça:
<html>
<head>
<style type="text/css">
.image { width: 250px; }
.image:hover { width: 50%; }
</style>
</head>
<body>
<img src="path/to/image" class="image" />
</body>
</html>
ça donne ça.
Bluffant non ? Bon ok, le code est super simple, mais n'est-ce pas ce qui justement fait la beauté de la méthode ?
Bien sur, il y a moyen de faire mieux, beaucoup mieux, mais bon, c'est déjà une bonne base.
Comments
Je me suis interressé à ton code et j'ai voulu l'utiliser pour ma gallery.
Je l'ai modifié pour que l'image se mette a une certaine taille par défaut (j'avais mis 100% de la largeur) et que la taille soit la taille originale quand on passait dessus. Mon image étant plus grande que mon écran, elle dépassait donc de ma page et les ascenseurs sont donc apparu verticalement et horizontalement... pour le scroll vertical, pas de problème j'ai la molette sur ma souris (top new technologie hein?) en revanche poru l'horizontal... j'ai du être obligé de le faire en bougeant le curseur sur les ascenseurs... et là, que se passe-t-il? L'image revient à la taille "par défaut" puisque la souris n'est plus dessus... avec ton système on ne peut donc pas voir toute l'image si celle-ci dépasse l'écran.
"et bien ne met pas la taille originale et ne la fait pas déborder de l'écran" me dirais-tu... oui mais non parce que c'est précisemment ce que je veux... la taille originale... pour éventuellement voir des détails qu'on ne verrait pas quand la photo est réduite...
Toutefois, je pense qu'il doit y avoir moyen d'utiliser les css plutôt que les frames pour faire plus ou moins ce que je veux.
http://mammouthland.free.fr/cours/css/cours8.php
Les images grand format sont chargées en même temps que les thumbnails? ou bien seulement lorsque l'on passe la souris dessus?
Parce que si ça n'est pas le cas, ça risque d'être assez lourd sur une page avec beaucoup de thumbnails.
effectivement, ça risque d'etre un peu lourd, puisque ce sont bien les images "grand format" qui sont chargées. je ne sais pas si on peut changer le src d'un tag img a la volée en CSS, mais ça mérite réflexion (peut etre ce problème est-il abordé dans le lien donné par panjhy remarque, je n'ai fait que le survoler)