DIV visible au survol pour chaque enregistrement(mysql)

**pp_le_moko** · 16/01/2011, 20h23

Bonsoir à tous et meilleurs vœux,

J'ai construit dans un "UL" une "merveilleuse" liste en LI issue d'une base de données.
A chaque enregistrement survolé s'affiche le DIV invisible dans lequel un élément de mon enregistrement est lié.
J'y ai donc intégré du javascript.
Je perds le lien dès que je code en php. Une solution ?
Je ne sais pas comment écrire le code qui me permettrait d'afficher le DIV invisible de chaque enregistrement.
Voici mon code:

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
<ul>
<!-- DEBUT DE LA LISTE-->
	<?php do { ?>
	  <li id="txt_img_fd" onMouseOver="div.show('zoom')" onMouseOut="div.hide('zoom')">
	    <a href="#"><span id="txt_img"><img src="images/entrees_froides/<?php echo $row_RsEntreesFroides['ImgVignette']; ?>"></span>
          <span id="txt">
	        <span id="txt_c12"><?php echo $row_RsEntreesFroides['NomFr']; ?></span><br>
	        <span id="txt_c10"><?php echo $row_RsEntreesFroides['DescriptionFr']; ?></span> </span>
          <span id="txt_fad">
          <span id="txt_euros"><?php echo $row_RsEntreesFroides['PrixEuro']; ?></span><span id="txt_centime">,<?php echo $row_RsEntreesFroides['PrixCent']; ?> &euro;</span></span><br>
          </a></li>
	  <?php } while ($row_RsEntreesFroides = mysql_fetch_assoc($RsEntreesFroides)); ?>
<!-- FIN DE LA LISTE -->
    </ul>
  </div>
 
<!-- DEBUT DU DIV INVISIBLE -->
  <div id="zoom">
  	<img src="images/entrees_froides/<?php echo $row_RsEntreesFroides['ImgZoom']; ?>" />
    <div id="zoom_txt"><span id="zoom_nom"><?php echo $row_RsEntreesFroides['NomFr']; ?></span><span id="zoom_prix"><span id="zoom_euro"><?php echo $row_RsEntreesFroides['PrixEuro']; ?></span><span id="zoom_cent">,<?php echo $row_RsEntreesFroides['PrixCent']; ?> &euro; </span></span><span id="zoom_annul"></span></div>
  </div>
<!-- FIN DU DIV INVISIBLE -->

Merci pour vos réponses

**NoSmoking** · 16/01/2011, 22h10

Bonjour,

J'ai construit dans un "UL" une "merveilleuse" liste en LI issue d'une base de données.
A chaque enregistrement survolé s'affiche le DIV invisible dans lequel un élément de mon enregistrement est lié.
J'y ai donc intégré du javascript.

le CSS suffit dans ton cas, un petit 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
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
li div {
  display : none;
  border : 1px solid #808080;
  background-color : #f0f0f0;
  margin-top : 20px;
  margin-left : 20px;
  padding : 10px;
}
li:hover div {
  display : block;
  position : absolute;
}
</style>
</head>
<body>
<ul>
  <li><div>bonjour<br>ligne 1</div>Ligne 1</li>
  <li><div>bonjour<br>ligne 2</div>Ligne 2</li>
  <li><div>bonjour<br>ligne 3</div>Ligne 3</li>
</ul>
</body>
</html>

**pp_le_moko** · 17/01/2011, 12h54

Bonjour,

Je peut être d'accord avec la réponse mais... je ne souhaite pas que le DIV s'aligne verticalement sur la ligne qui lui est propre.
Je veux que mon DIV, placé précisément sur ma page, ne suive pas la ligne de mon enregistrement de ma liste.
Est-ce que le CSS me permet cette "rigidité" ?

Merci

**NoSmoking** · 17/01/2011, 18h25

Est-ce que le CSS me permet cette "rigidité" ?

le CSS permet plein de chose et plus encore.

Je te mets un exemple qui devrait mieux te convenir

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
  font-family : Verdana, Arial;
}
#titre {
  width : 600px;  
  margin : auto;  
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 500px;
  height : 400px;
  margin : auto;
  padding : 5px;
}
#conteneur li {
  cursor : pointer;
}
#conteneur .info {
  top : 50px;
  left : 300px;
  width : 150px;
  height : 250px;
  border : 1px solid #f0f080;
  background-color : #fefeee;
  padding : 5px;
}
#conteneur li div {
  display : none;
}
#conteneur .where{
  position : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : #f8f8f8;
  border : 1px solid #e0e0e0;
}
#conteneur li:hover div {
  position : absolute;
  display : block;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div id="conteneur">
  <div class="where info">Zone Info...</div>
  <ul>
    <li><div class="info"><b>Titre 1</b><hr>Bonjour de la ligne 1</div>Ligne 1</li>
    <li><div class="info"><b>Titre 2</b><hr>Bien le bonjour de la ligne 2</div>Ligne 2</li>
    <li>Ligne 3<div class="info"><b>Titre 3</b><hr>Les informations de la ligne 3</div></li>
  </ul>
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>
</div>
</body>
</html>

**SpaceFrog** · 17/01/2011, 19h56

attention avec :hover et les versions de IE sous certains version le hover n'est pris en compte que par la balise a ...

**pp_le_moko** · 23/01/2011, 18h20

Bonsoir,

Vos conseils m'ont été très utiles.
J'ai intégré ce principe dans mes listes et "ça fonctionne !" parfaitement.

J'ai une remarque:
j'ai intégré dans mon LI un back-ground image. Lorsque mon rollover joue pleinement sa fonction, je n'arrive pas à décaler verticalement cette image pour ajouter un effet dynamique au passage de mon focus.

Avez-vous une solution à préconiser ?

merci

**pp_le_moko** · 24/01/2011, 22h48

Bonsoir,

Je pense avoir trouvé une solution. Cela fonctionne mais je n'en suis pas sûr à 100%.
J'ai créé dans mon <LI> une zone (<a href="#">) précisant que dès le survol, mon background-image est décalée d'autant de pixel souhaité.
Ceci est mon <a href="#">:

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
#liste_elements a {
	display: block;
	height: 26px;
	padding: 6px;
	background-image: url(images/bando_ent_fro.png);
	background-repeat: no-repeat;
	text-decoration: none;
}
#liste_elements a:hover {
	display: block;
	height: 26px;
	padding: 6px;
	background-image: url(images/bando_ent_fro.png);
	background-repeat: no-repeat;
	background-position: 0px -37px;
	text-decoration: none;
}

Mon problème résolu, je me retrouve confronté à un autre problème:
je veux que l'apparition du DIV ne se fasse pas au survol du LI mais bien sur celui du <a href="#">.

Ceci est le déclenchement du DIV à afficher actuellement

Code :

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

1
2
3
4
#conteneur li:hover div {
	position : absolute;
	display : block;
}

En lisant la synthaxe de cette phrase, si j'ai bien compris, il est écrit que sur le hover du li, le DIV apparaît. Ai-je raison ?
Ce que je souhaite, c'est au survol du a:hover de mon LI, mon DIV apparaisse.

Merci

**NoSmoking** · 25/01/2011, 07h47

Envoyé par pp_le_moko

Mon problème résolu, je me retrouve confronté à un autre problème:
je veux que l'apparition du DIV ne se fasse pas au survol du LI mais bien sur celui du <a href="#">.
...
En lisant la synthaxe de cette phrase, si j'ai bien compris, il est écrit que sur le hover du li, le DIV apparaît. Ai-je raison ?
Ce que je souhaite, c'est au survol du a:hover de mon LI, mon DIV apparaisse.
Merci

pour des raisons de validation il faut remplacer les éléments DIV par des éléments SPAN à l'intérieur des balises A, et modifier un peu le CSS, comme indiqué ci dessous
Cela donne

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 HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
  font-family : Verdana, Arial;
}
#titre {
  width : 600px;  
  margin : auto;  
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 500px;
  height : 400px;
  margin : auto;
  padding : 5px;
}
/*-- OUT
#conteneur li {
  cursor : pointer;
} --*/
/*-- AJOUT --*/
#conteneur a {
  cursor : pointer;
  text-decoration : none;
}
#conteneur .info {
  color : #000;
  top : 50px;
  left : 300px;
  width : 150px;
  height : 250px;
  border : 1px solid #f0f080;
  background-color : #fefeee;
  padding : 5px;
}
/*-- OUT
#conteneur li div {
  display : none;
} --*/
%osition : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : #f8f8f8;
  border : 1px solid #e0e0e0;
}
/*-- OUT
#conteneur li:hover div {
  position : absolute;
  display : block;
} --*/
/*-- AJOUT --*/
#conteneur a span {
  display : none;
}
/*-- AJOUT --*/
#conteneur a:hover span {
  position : absolute;
  display : block;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div id="conteneur">
  <div class="where info">Zone Info...</div>
  <ul>
    <li><a href="#"><span class="info"><b>Titre 1</b><br>Bonjour de la ligne 1</span>Ligne 1</a></li>
    <li><a href="#"><span class="info"><b>Titre 2</b><br>Bien le bonjour de la ligne 2</span>Ligne 2</a></li>
    <li><a href="#">Ligne 3<span class="info"><b>Titre 3</b><br>Les informations de la ligne 3</span></a></li>
  </ul>
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>
</div>
</body>
</html>

nota : c'est toujours incompatible IE6...

**pp_le_moko** · 30/01/2011, 12h28

No Smoking,

Ton code fonctionne à merveille. J'ai bien un survol sur ma ligne d'enregistrement. Mais...
Il m'est dans l'impossibilité d'ajouter un background-image dans mon <a href="#">: l'image ne s'affiche pas !

Le background-image me sert au survol du <a href="#"> puisque mon image se décalerait verticalement.

Le <a href="#"> est-il en bonne place dans le LI ?

merci

**pp_le_moko** · 30/01/2011, 13h07

No Smoking,

J'ai finalement trouvé une solution. Non pas d'après "ta" dernière contribution, mais à partir de "ta" première.

Pour résumé:
– mon <LI> a une certaine largeur (le rollover agit sur le LI entier),
– ma liste n'a plus de marge à gauche (100px par exemple)
– ma zone d'info, elle, est bien décalé de -100px à gauche (valeur négative)...

J'ai donc calé ma zone d'info avec un calage négatif pour ne plus être gêné par le <a href="#"> du LI qui agissait sur mon LI entier.

Mais les valeurs négatives, fonctionnent-elles parfaitement sur tous les navigateurs (Safari, Firefox: ok mais IE ?) ?

Merci encore pour ton aide précieuse.

**NoSmoking** · 30/01/2011, 14h10

Ton code fonctionne à merveille.

j'ai un doute, je viens de me rendre compte qu'il y a une erreur dans la déclaration de style

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
/*-- OUT
#conteneur li div {
  display : none;
} --*/
#conteneur .where{  /* manque cette ligne */
/* %osition : absolute; GROSSE CAGAGNE ! */
  position : absolute; /* ce qu'il fallait lire */
  color : #e0e0e0;
  font-weight : bold;
  background-color : #f8f8f8;
  border : 1px solid #e0e0e0;
}

Il m'est dans l'impossibilité d'ajouter un background-image dans mon <a href="#">: l'image ne s'affiche pas !

il me semble qu'avec un

Code :

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

1
2
3
#conteneur li a:hover {
  background-image : url(image_fond.gif);
}

cela devrait le faire, et si tu veux qu'il aient tous la même largeur, pour plus de propreté à l'affichage mettre par exemlpe

Code :

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

1
2
3
4
5
#conteneur li a:hover {
  width : 150px;
  display : block;
  background-image : url(image_fond.gif);
}

regarde si cela convient

DIV visible au survol pour chaque enregistrement(mysql)

JavaScript

Discussions similaires

Partager

Partager