Discussion :

[lhpp]

Bonjour,

Je souhaiterais réaliser un zoom d'image au survol de la souris. J'ai regardé du coté de solutions utilisant le CSS et en appliquant une dimension fixe à l'image de base.

Cependant, cette solution remplace l'image de base en l'agrandissant. Ce que je souhaiterais faire, c'est afficher une image en "sur-impression" par dessus la page courante représentant un zoom de l'image survolée par la souris.

Je pense que cela est possible en javascript (a vérifier), mais je veux éviter tout javascript sur mon site.

Avez vous une solutions en html / css ? (du coté de la sortie du flux de l'image zoomée par exemple...).

Merci de votre aide.

Ps: Voici un bout de code qui ressemble a ce que je souhaiterais faire:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.zoom a:hover img 
{
    width:300px; 
    position:absolute;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="zoom">
    <a><img src="images.jpg" border="0"></a>	
</div>

Cela correspond a ce que je souhaite faire car ca me permet d'avoir un zoom par dessus le texte de la page. Par contre, l'image de base disparait et l'espace qu'elle occupait est repris par le texte.

Comment modifier ce bout de code pour que le zoom soit fait avec une autre image (image2.jpg) et que l'image de base reste tel quel ?

Merci.

[Sancho_54]

Dans ton html tu met :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="zoom">
    <p>
        <img src="machaon.jpg"
         alt="photo d'un papillon machaon butinant une fleur" />
    </p>
</div>

Et dans ton css tu met :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:300px;
height:225px;
}
.zoom img:hover {
width:400px;
height:300px;
}

Dis moi si c bon a bientot

[Bisûnûrs]

@Sancho_54 : hover autre part que sur un lien ne fonctionne pas avec IE.

[lhpp]

Uhm, je viens de tester ta solution Sancho_54, mais cela redimensionne l'image. Ce que je veux faire, c'est garder l'image d'origine telle qu'elle est, et faire afficher un zoom de cette image par dessus la page.

Avec ma méthode, l'image est zoomée, mais sort du flux.

Avant le zoom, j'ai ma miniature et a sa droite, du texte. Au zoom, l'image s'agrandit, passe devant le texte, mais du coup, le texte se colle completement a gauche de la page.

S'il n'est pas possible de garder l'image miniature d'origine et d'afficher son zoom en sur impression, je souhaiterais au moins que le texte ne change pas de place au zoom.

Est ce possible ?

(un lien que j'ai trouvé qui fait un peu ce que je veux :
http://www.cssplay.co.uk/menu/lightbox.html#flower8
)

[lhpp]

J'ai finalement résolu mon problème, je vous soumets la solution (pour ceux qui souhaiteraient faire la meme chose !)

Pour cela, j'ai utilisé la même méthode que celle qui me permet de faire de InfoBulles personalisées.

Dans l'infobulle, a la place de mettre du texte, je place le zoom de mon image (qui est la meme image, mais de taille plus grande).

Css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
#zoom
{
}
 
#zoom a
{ 
	text-decoration:none; 
} 
 
#zoom a:hover
{
	color:white;
	background: none; 
} 
 
#zoom a span 
{ 
	display:none;
	margin-top:10px;               /*permet de placer le zoom dans la page*/
	margin-left: 0px;               /*permet de placer le zoom dans la page*/
	border: 1px solid #ffb515;   /* bord sur l'image zoomée                  */
	background-color:#FFFFFF;
} 
 
#zoom a:hover span
{ 
	position: absolute;
	text-align:justify;
	display:inline;
}

Code Html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="zoom">
    <a href="mon_lien"><img src="mon_image_de_base" border="0"><span><img src="mon_image_zoomée" border="0"></span></a>
</div>

Cela me permet donc d'avoir une image miniature dans ma page ("mon_image_de_base") et lorsque je passe ma souris dessus, j'obtiens l'image zommée ("mon_image_zoomée") dans un cadre par dessus le texte.