miniature au survol

Version imprimable

02/05/2011, 21h53
clairetj

miniature au survol

Bonsoir (ou bonjour) à toutes et tous.
Je suis actuellement en train de développer un site internet avec des pages en PHP et je me demandé quelque chose qui pourrais m'aider pour la forme du site.
Mon site fait des recherches dans une base de données de ma compositition, ils affiche tous les résultat de la recherche les uns à la suite des autres et chaques donnée et un lien qui donne sur une image.
Ma question est es-ce qu'il est possible de faire en sorte que lorsque je passe la souris sur le lien, on pourrait voir apparaitre l'image en réduit sans pour autant cliquer sur le lien.
Merci à toutes et tous
Cordialement,
Clairetj

PS: si cette méthode n'ai pas possible a faire, j'aurai alors une autre question ^^
03/05/2011, 14h13
SpaceFrog

un ajax qui retourne le src d'une image vignette si elle existe
sinon créer à la volée des vignettes avec gdlib

Bonjour,
existe en pur CSS

Code:

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.vignette{
  position: relative;
}
.vignette .miniature{
  background: #e0e0e0;
  border : 1px solid #c0c0c0;
  width: 200px;
  height: 150px;
  display: none;
}
.vignette a:hover .miniature{
  position: absolute;
  display: block;
  top: 0px;
  left: 100px;
}
</style>
</head>
<body>
<div class="vignette">
  <br><a href="#">photo_001<img src="photo_001.jpg" alt="photo_001" class="miniature"></a>
  <br><a href="#">photo_002<img src="photo_002.jpg" alt="photo_002" class="miniature"></a>
  <br><a href="#">photo_003<img src="photo_003.jpg" alt="photo_003" class="miniature"></a>
</div>
</body>
</html>