[Résolu] Photos recto-verso en HTML

[Nogi]

Bonjour,

 

En parcourant un site, j'ai vu une photo, de face, d'une guitare et en passant le curseur(la flèche de la souris) sur ladite image, elle effectuait un recto-verso, alors on pouvait voir l'endos de celle-ci.

 

J'aimerais savoir si vous connaissez l'astuce, car ce procédé m'intéresserait. J'imagine que cette technicalité comporte 2 photos pour arrivé à ce résultat. Mais quel en serait le chemin HTML. J'ai fait qq recherches sur internet; photos tournantes, animées.... En vain!

 

Merci!

 

Nogi

[simous]

Il y a plusieurs techniques.

En voici une amusante, tout en HTML/CSS, pas de javascript.

 

http://openweb.eu.org/articles/zoom_image/

[Nogi]

Merci simous,

 

Je suis allé y jeté un coup d'oeil, intéressant! Mais ce n'est pas ce que je recherche.

 

En fait, c'est comme si on regardait une photo d'un ampli pour un système de son. Au lieu d'avoir 2 photos l'une à côté de l'autre(face et endos), on verrait le devant de l'ampli(et tous les boutons) et en passant la flèche de la souris, on pourrait y voir l'endos; i.e., les connexions audio-vidéo. Alors, ce n'est pas un survol, mais une double vue avant-arrière d'un objet. Je garde l'envoi de tes liens, c'est tjrs utile!

 

Merci encore!

 

Nogi

[simous]

Ben si tu veux changer de photo en passant la souris dessus, alors c'est au survol que le changement s'effectue.

 

Mon exemple peut fonctionner comme tu le dis (à moins que je ne comprenne rien), il suffit de mettre une photo de face, et une photo de dos à la place du zoom...

 

C'est totalement l'effet de la variante de la seconde technique : http://openweb.eu.org/articles/zoom_image/...xes/#technique2

 

 

Sinon, l'effet s'appelle un "rollover", il y a quantité de tuto sur le net qui expliquent comment faire.

 

Encore un exemple : http://css.alsacreations.com/Tutoriels-et-...ss-image-unique

 

Le principe est le même, changement de l'image avec le a:hover...

Modifié le 11 mars 2008 par simous

[Nogi]

Désolé, je n'avais pas vu ça comme ça. Je ne voyais que l'effet "zoom" ds votre exemple. Je vois maintenant qu'avec 2 images de mêmes dimensions(px: L/h), vous avez raison, j'arriverais au résultat.

 

Merci pour les suggestions, liens et commentaires!

 

Cordialement,

 

Nogi

[Dylav]

Le problème semble avoir trouvé sa solution.

Ainsi, afin de signaler clairement à ceux qui ont un problème similaire qu'ils ont peut-être une solution toute trouvée (s'ils pensent à utiliser la fonction Recherche en indiquant le mot-clé "résolu" auparavant), et afin de signaler aux autres contributeurs qu'il est inutile de continuer à se creuser la tête sur le problème (à moins d'avoir des suppléments d'informations à apporter pour mieux comprendre ce qui posait problème), un modérateur a préfixé le titre du topic avec la mention [résolu].

Merci, à l'avenir, de bien vouloir prendre à votre charge cette mise à jour quand vous estimez que votre problème a été résolu de manière satisfaisante (et parallèlement, si le problème a disparu "mystérieusement", inutile d'induire les gens en erreur ) Pour cela, votre premier message