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

Vue hybride

Partager

Partager