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>

02/05/2011, 21h53	#1
clairetj Candidat au titre de Membre du Club Étudiant Inscription : avril 2011 Messages : 46 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Secteur : Enseignement Informations forums : Inscription : avril 2011 Messages : 46 Points : 13 Points : 13	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 ^^
	00

03/05/2011, 14h13	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	un ajax qui retourne le src d'une image vignette si elle existe sinon créer à la volée des vignettes avec gdlib __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

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