Visionneuse d'image 100% CSS

Publié le par Francisek

Certains "furieux" s'amusent à pousser les possibilités du CSS à leur maximum.
Pour exemple, cette visionneuse d'image avec effet de zoom, 100% CSS. Passez donc votre souris sur cette image, vous verrez le résultat.

Venise

Je ne rentrerai pas dans des considérations trop techniques, mais le principe est simple: on place dans un div une miniature de l'image en fond d'une liste de liens contenant des balises em vides positionnées de façon absolue afin de quadriller le fond (l'usage des em n'est pas important, des span feraient tout aussi bien l'affaire).
Dans mon exemple, l'image est recouverte d'un quadrillage de 10x10 balises <li><a href="#nogo"><em id="IJ"></em></a></li> !!

Il suffit ensuite de définir dans le CSS un gestionnaire li a#IJ:hover em qui positionne l'image de fond en taille réélle dans l'élément survolé (un autre gestionnaire li a:hover em place et dimensionne l'élément survolé correctement).

D'après Stu Nicholls

Publié dans Pour les experts

Commenter cet article

Moâ 21/02/2006 17:42

Hello ;-)
Je ne sais si je suis au bon endroit, mais over-blog m'envoie ici.
La fonction valider en-dessous de mon css n'apparait plus?
Over-blog me dit que j'ai mis du html, ce qui a engendré ce bug.
Comment rétablir???
Avec mes remerciements, @ bientôt j'espère...
Bye!

Francisek 22/02/2006 11:14

 L'article vers lequel on t'a renvoyé est certainement T'as cassé ton blog ?, il peut t'aider à réparer.

akane 02/01/2006 17:18

aujourdhui je me suis dit: aller!soyons fous, allons voir la categorie pour les experts
alors je confirme: le titre est bien choisit !^^
bonne continuation

Francisek 03/01/2006 11:21

 

samy 19/11/2005 23:50

Salut,
cet effet est absolument super...mais comment le reproduire...avec un langage de novice !!
Désolé de ne pas être encore un génie...(j'y travaille tous les jours, dur...dur) !! merci par avance
cordialement, samy

Francisek 23/11/2005 15:45

 Comme le précise la catégorie, c'est un article plutôt réservé aux experts, et ce genre d'utilisation du CSS n'a pour objet que de montrer ce que l'on peut faire avec.

Martine, la pÚlerine 08/11/2005 14:39

merci, génie de mon coeur ... et big bisousFrancisek : :0010:

Martine, la pÚlerine 08/11/2005 12:57

oui ça je sais faire.... mais je l'ai où cette image en taille réelle ? Je la mets dans un article vide, juste avec cette image ?? Alors si c'est ça je sais faire... Je voulais, pour palier les manques de possibilités d'album, créer plusieurs articles "albums virtuels" avec les réductions des images puis pour les visualiser une à une en grandeur réelle, cliquer dessus... Donc pour résumer, est-ce que je peux pour chaque image créer un article vide avec cette image en grand et établir le lien à partir de l'album virtuel ??? Ca c'est la résolution du pb au minimum... mais j'aurais voulu (encore mieux) obtenir des images "plein écran"... j'ai vu ça sur certains blogs c'est super...Francisek : Tu peux mettre toutes tes miniatures sur la même page, en cliquant dessus, ça ouvre une fenêtre avec l'image en grand. Par exemple, le code : Donnera :