Comment faire un "onmouseover" particulier?

Version imprimable

14/07/2007, 16h45
Recif2

Comment faire un "onmouseover" particulier?

Bonjour,

Voici mon probleme : j'aimerais diffuser des petites annonces et lorsqu'on passe la souris sur l'affichage d'une annonce, le cadre de l'annonce s'agrandis pour visualiser la description en plus.

en images : http://www.sous-la-mer.com/temp/pointeur.gif

bonjour,

voilà un exemple :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.conteneur{
 cursor: pointer;
 border: ridge 1px #AAAAAA;
 width: 200px;
 text-align: center;
}
.description{
 display:  none;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function mouseOver(idObj)
{
  document.getElementById(idObj).style.display="block";
}
 
function mouseOut(idObj)
{
  document.getElementById(idObj).style.display="none";
}
 
//-->
</script>
</head>
 
<body>
 
 
<div class="conteneur" onmouseover="mouseOver('idDescription')" onmouseout="mouseOut('idDescription')">
  <img src="monImage.jpg" />
  <h3>Titre de l'image</h3>
  <div id="idDescription" class="description">
  description..........
  </div>
</div>
 
 
 
</body>
 
</html>

14/07/2007, 19h00
Recif2

Bonjour,

Et merci pour ta réponse. Le probleme dans ton script c'est que la description pousse tout vers le bas... J'ai trouvé un truc qui se rapproche : http://www.sous-la-mer.com/test.html
15/07/2007, 10h53
bouvda

Bonjour,

pour éviter que tout soit décalé, il faut utiliser un positionnement absolu pour le bloc de description.
C'est la méthode appliquée sur la page donnée en lien et que tu peux voir en affichant le code de la page.
15/07/2007, 11h03
Recif2

Merci à tous pour vos réponses! J'ai trouvé un truc pas mal en fait, sous forme d'infobulle : http://www.walterzorn.com/tooltip/tooltip_e.htm

Je pense que ca ira comme ça, merci en tout cas ;)