Comment faire un "onmouseover" particulier?

**Recif2** · 14/07/2007, 16h45

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 :

**Auteur** · 14/07/2007, 18h51

bonjour,

voilà un exemple :

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

**Recif2** · 14/07/2007, 19h00

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

**bouvda** · 15/07/2007, 10h53

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.

**Recif2** · 15/07/2007, 11h03

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

Comment faire un "onmouseover" particulier?

JavaScript

Partager

Partager