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

DIV visible au survol pour chaque enregistrement(mysql)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager