miniature au survol

**clairetj** · 02/05/2011, 21h53

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 ^^

**SpaceFrog** · 03/05/2011, 14h13

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

**NoSmoking** · 03/05/2011, 20h16

Bonjour,
existe en pur CSS

Code html :

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
<!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>

miniature au survol

JavaScript

Discussions similaires

Partager

Partager