Comment réaliser une galerie photo avec photo qui s'affiche au survol à un autre endroit [Résolu]

marion.bouilly · 20/07/2011, 20h26

Bonjour tout le monde,

J'espère que vous allez pouvoir m'aider sur mon problème.
Je suis entrain de créer un site web. Avec mes quelques notions en HTML, j'ai pu créer le fond ..
Mais le problème c'est qu'il me manque un élément crucial !!!
Une "espèce de galerie photo". Je voudrais réaliser une petite galerie photo 3 lignes / 3 colonnes.
Et en passant sur ces photo je voudrais l'agrandissement qui s'effectue sur le côté opposé !
Seulement, je n'arrive pas à réaliser l'agrandissement, ou même la galerie (tentative par un tableau : ECHOUE).
Vous trouverez en pièce jointe, ce que je veux, mais en image. Si vous avez besoin du moindre fichier, n'hésitez pas !

MERCI BEAUCOUP !
En espérant avoir votre aide ..

laurentSc · 21/07/2011, 11h49

Tu devrais pouvoir t'inspirer de ce qui est visible ici. Pour faire disparaître la photo agrandie, la survoler.
Code de cet exemple :

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
<style>.popup_anchor div.popup{visibility: hidden;
z-index: 10;
top: 120px;
left: 100px;
position: absolute;
background-color:white;
border-color:black;
}
span:hover.popup_anchor div.popup{
visibility: visible;
}
span .popup_anchor div:hover.popup{
visibility: visible;
}
</style>
<span
 onmouseover="document.getElementById('popupid').style.visibility = 'visible';"><span
 class="popup_anchor"><b><img
 src="chevaux2008_01010.jpg" chevaux2008=""></b><span
 onmouseout="document.getElementById('popupid').style.visibility = 'hidden';">
<div class="popup" id="popupid"><span><img
 src="chevaux2008_010.jpg"></span><br>
</div>
</span></span></span>

Pour plusieurs photos, modifier les identifiants "popup_anchor" et "popupid".

aL1ba · 23/07/2011, 01h03

Trouvé sur ce site même:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
<!-- Date de création: 07/02/06 -->
 
<title>CSS Debutant : Zoom d'images (vignettes) en CSS - Méthode 2</title>	 
<style type="text/css">	
<!--  
body {
background-color:black;	
color:white;
height:500px; /*afin d'avoir un ascenceur horizontal pour de faibles résolution d'écran*/
}
img {border:1px solid black;}	
 
.thumb {
position:relative; 
top:0;
left:300px; /*edited from 0 to left: 300px; to center list of thumbs*/
}
.thumb a {
margin: 0; 
text-decoration:none;
}
 
.thumb a:hover {
background-color:black; /*indispensable, sinon, pas de zoom */
}
 
.thumb a .grand {
display:block;
position:absolute; 
width:0px; 
}
.thumb a:hover .grand { 
position:absolute; 
top:120px;  /* edited to 120 from 8opx */
left:125px; /* edited to 125 from opx, to center pict */
width:300px; /* not edited eventhough not actual size */
height:225px; /* not edited eventhough not actual size */
}
 -->
</style>
<meta name="description" content="Deuxième exemple de zoom de vignettes  uniquement avec le langage CSS"/>
</head><body>	
<h1>Zoom d'images façon thumbnail - Méthode 2 -</h1>
<p>Passer le curseur de la souris sur les miniatures pour voir les photos en grand</p>
 
<div class="thumb">
<a href="#"><img src="CssHovPic/aS.gif" alt="miniature a.gif"/>
<img src="CssHovPic/a.gif" alt="a.gif full size" class="grand"/>
</a>
<a href="#">
<img src="CssHovPic/bS.gif" alt="miniature b.gif"/>
<img src="CssHovPic/b.gif" alt="b.gif full size" class="grand"/>
</a>
<a href="#">
<img src="CssHovPic/cS.gif" alt="miniature c.gif"/>
<img src="CssHovPic/c.gif" alt="c.gif full size" class="grand"/>
</a>
<a href="#"><img src="CssHovPic/dS.gif" alt="miniature d.gif"/>
<img src="CssHovPic/d.gif" alt="d.gif full size" class="grand"/>
</a>
<a href="#">
<img src="CssHovPic/eS.gif" alt="miniature e.gif"/>
 
<img src="CssHovPic/e.gif" alt="e.gif full size" class="grand"/>
</a>
<a href="#">
<img src="CssHovPic/fS.gif" alt="miniature f.gif"/>
<img src="CssHovPic/f.gif" alt="f.gif full size" class="grand"/>
</a>
</div>
<div style="margin-top: 250px; text-align: center;">
<hr/>
<a href="index.php">Retour à la page d'accueil</a>
<p>sample out of site developpez.com Css only. pict resized with animationshop by SA, but it seems you can get away from the resizing bit. This has been validated with W3C in XHTML 1.0 Strict</p>
 
<p>Used size: 4 small = 100 x 100, larger = 250 x 250- not edited in thumb hover grand, kept the 300 x 225px, but edited in .thumb a:hover .grand { A = the top to 120px from 80px,and B = the left to 125 from 0, and switched charset to UTF-8 from ISO, also edited .thumb left to 300p from 0px - no further edit made- Added 3 more pict to the original 3, and moved them all to a specific directory out of the root</p>
</div>
 
</body></html>

et je l'ai un peu édité, pour avoir 6 images et pour justement, déplacer un peu l'endroit ou se place limage aggrandie.
Ça fonctionne très bien.

Malheureusement, je n'arrive pas à retrouver la source sur "developpez"...cependant j'ai retrouvé ça:

http://css.developpez.com/galerie/?p...#galerie-image ce qui donne:

http://css.developpez.com/galerie/de...alerie-images/

qui resemble pas mal à ce que je t'ai donné en exemple.
bye,

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email