Image sur Image (Loupe sur Photo)

Bonjour,

Après maintes tentatives, je recherche comment afficher une petite loupe en bas à droite d'une miniature (sur celle-ci) afin de l'agrandir ensuite.

Je peux effectivement faire une photo avec celle-ci, mais je voudrais la caler en bas à droite de photo sans dénaturer la photo d'origine.

Quelle est la meilleure technique à utiliser, sachant que je peux avoir 3 photos alignées, donc j'aurai obligatoirement dans mon code une balise img et une a href affichant ensuite la photo agrandie.

J'ai tenté class=zoom sur ma balise img sans trop de résultat...

.zoom {
  position: absolute;
  display: block;
  background: url(../im/loupe.gif) no-repeat bottom right;
}

Merci d'avance de me dire où je peux trouver un exemple pour effectuer ce style de mise en forme.


*** Message à supprimer, désolé
Modifié par Rackham (30 Jun 2009 - 15:29)

Peut-être avec jQuery qui offre plusieurs possibilités ( http://www.mind-projects.it/projects/jqzoom/ ou http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery entre autre)

Merci, mais je veux l'intégrer en CSS, sachant que parfois les scripts sont désactivés.

Pourquoi ne mets-tu pas ta photo dans une div contenant ta miniature + la loupe positionnée en absolute comme ceci :

.zoom{
    position: absolute;
    right: 5px;
    bottom: 5px;
}

Non ?

Bonjour,

À priori il faut partir d'un code HTML comme suit (ou équivalent):

<a class="vignette-zoom" href="grande_image">
   <img src="petite_image" alt="..." />
   <span></span>
</a>

Tu peux ensuite:
- positionner le lien (élément A) en relatif;
- utiliser le SPAN vide en lui donnant des dimensions et une image de fond (la loupe), et en le positionnant en absolu en bas à droite du A.

Attention, le lien devra être en display:block ou flottant pour que ça marche correctement. Donc là ça dépend un peu du reste du code, du contexte... difficile de conseiller quelque chose dans l'absolu.

Bonjour et merci Florent,

Je veux juste sur une image de 200 sur 200 par exemple, superposer une autre image dans le coin en bas à droite (en l'occurrence une loupe, afin de montrer que l'on peut cliquer sur l'image).

Et je veux mettre la petite image dans le CSS. Elle fait 20 sur 20 pour info.