Zoom au survol de la photo

**jmde** · 22/03/2007, 18h55

Bonsoir,

Voici un code que j’ai trouvé pour effectuer un Zoom au survol de la photo, mais je n’arrive pas à le faire fonctionner et je ne vois pas ou se situe l’erreur.

Merci pour votre aide.

Salutations

Code HTML

Code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body>
<div class="thumb">
<a href="#">
<img src="../Animateurs1/Alain.JPG" alt="Animateurs1"   /></a>
</div>
<div class="thumb">
<a href="#">
<img src="../Animateurs2/Andre.JPG" alt=" Animateurs2"   /></a>
</div>
<div class="thumb">
  <a href="#">
  <img src="../Animateur3/Francoise.JPG" alt=" Animateurs3"  /></a>
</div>	
 
</body>
</html>

Code CSS

Code :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* CSS Document */
body {
	background-color:black;	 
	color:white;
	height:500px;
	} 
 
img {border:0} 
 
.thumb {
	width:300px;
	height:225px; 
	margin:1px;
	float:left; 
	background-color:#D3D3D3; 
	display:block;
	} 
 
.thumb a {
	display:block;
	}
 
.thumb a:hover {
	position:absolute;	
	}	 
 
 
body>.thumb a:hover {	  
	position:relative;	 
	}	
 
.thumb a img { 
	margin:0;
	padding:0;
	width:300px;
	height:225px; 
	}
 
.thumb a:hover img {
	position:relative;
	left:0px;
	top:40px;
	width:400px;
	height:325px;  
	}

**Bisûnûrs** · 22/03/2007, 19h39

La syntaxe

Code :

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

body>.thumb

ne fonctionne pas sur IE6.

**jmde** · 23/03/2007, 23h38

Bonsoir,

Merci pour ta réponse.
Pourtant dans ce code que j'ai trouvé sur le web il est indiquer qu'il fonctionne avec MSIE6+

Salutations

**Candygirl** · 24/03/2007, 15h08

Envoyé par jmde

mais je n’arrive pas à le faire fonctionner

Hello,

Qu'entends-tu exactement par là? Que se passe-t-il, sur quel navigateur?

Ton code à l'air correct bien qu'un peu lourd à mon goût (div inutiles).

Le

Code css :

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

1
2
3
body>.thumb a:hover {	  
	position:relative;	 
	}

sert a repositionner le lien :hover en relative sauf sur les navigateurs ne comprenant aps cette notation, donc IE6, où il sera en absolute afin d'éviter son agrandissement (IE6 ne se tient pas aux dimensions d'une boîte mais l'agrandit avec le contenu).

Perso j'aurais trouvé plus logique (et plus solide) de mettre l'image agrandie en absolute pour tous les navigateurs.

**jmde** · 24/03/2007, 15h36

Bonjour Candygirl,

Merci pour ta réponse.

1°) J'utilise Internet explorer 7.

2°) les photos se trouvent les unes au dessus des autres au lieu d'être les unes à coté des autres.

3°) Lorsque je passe la souris sur la photo, j'ai une main qui apparait, ainsi que le nom de la photo, mais sans agradissement de la photo.

4°) Je précise que je suis vraiment un débutant.

Merci pour ton aide.

Salutations.

**Candygirl** · 24/03/2007, 16h10

J'ai testé ton code et, chez moi, il fonctionne correctement suri IE7. C'est dur de t'aider lorsqu'on n'arrive pas à reproduire le bug.

Pour les photos l'une en-dessous de l'autre, il pourrait s'agir d'un oubli/faute de la propriété float, par exemple. Paut-être qu'une erreur de syntaxe empêche l'interprétation de ton css,...

Aurais-tu une page en ligne, un lien à nous donner ?

**jmde** · 24/03/2007, 21h05

Bonsoir Candygirl,

Je me suis aperçu qu'il manquait un lien entre la page HTML et la page CSS, et en cherchant un peu j'ai rajouté cette ligne entre les balises <Head> et le code fonctionne correctement.

<link rel="stylesheet" type="text/css" href="feuille_de_style.css" />

Merci pour ton aide.

Salutations.

**jmde** · 25/03/2007, 11h54

Bonjour Candygirl,

un peu lourd à mon goût (div inutiles).

Je reviens sur la discussion, et je trouve en effet que le code est un peu lourd surtout lorsqu'il y a beaucoup de photos.

Peux-tu stp le modifier en ce sens, car moi je n'ai pas encore assez de connaissances pour le faire.

Salutations

Zoom au survol de la photo

HTML

Discussions similaires

Partager

Partager