[DIV][Javascript] créer une DIV sur onmouseover

Bonjour

J'ai un checkbox et je voudrais que lors d'un "onmouseover" il y ait une DIV qui se créer en dessous du checkbox pour afficher une explication.

Je voulais utiliser "title" du checkbox mais l'explication est tro longue pour qu'elle soit afficher au complet dans "title"

Est-ce que quelqu'un a une idée comment je peux faire ca?

MErci

bonjour,

voici un script qui peut faire l'affaire. Une bulle apparaît lors du survol de l'image. Tu as juste à remplacer la balise img par la balise input.

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#idBulle{
text-align: center;
width: 160px;
display: none;
position: absolute;
z-index : 1;
background-color: #F4F49C;
padding: 2px;
margin: 2px;
border-style: ridge;
border-width: 3px;
border-color: #F4F49C;
font-family: Arial;
font-size: 8pt;
cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function MouseOut()
{
 document.getElementById("idBulle").style.display="none";
}
 
function MouseOver(ev,obj,message)
{
 
 idInput=obj.id;//On recupere l'id de l'objet appelant
 
 var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
 
 var el=document.getElementById("idBulle");
 
 //on affiche la boite de dialogue pour evaluer ses dimensions.
 if (el.style.display!="block")
    el.style.display="block";
 
 //hauteur et largeur de la bulle
 htDiv = el.offsetHeight;
 lgDiv = el.offsetWidth;
 
 //delta de la bulle sous la souris
 dY=10;
 dX=10;
 
 //position de la souris :
 Xfen = ev.clientX;
 Xdoc = Xfen + document.body.scrollLeft;
 
 Yfen = ev.clientY;
 Ydoc = Yfen + document.body.scrollTop;
 
 //position de la bulle dans la page :
 if ((Xfen + lgDiv + dX) > document.body.clientWidth)
   el.style.left = document.body.clientWidth + document.body.scrollLeft - lgDiv;
 else
   el.style.left = Xdoc + dX;
 
 if ((Yfen + htDiv + dY) > document.body.clientHeight)
 {
   el.style.top = document.body.clientHeight + document.body.scrollTop - htDiv-5;
 }
 else
    el.style.top = Ydoc + dY-5;
    
 el.innerHTML = message;
}
 
//-->
</script>
 
</head>
 
<body>
<img src="image1.jpg" onmouseover="MouseOver(event,this, 'Ceci est mon message !')" onmouseout="MouseOut()">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="image2.jpg" onmouseover="MouseOver(event,this, 'Message image 2')" onmouseout="MouseOut()">
 
 
<!--- Bulle -->
<div id="idBulle">
&nbsp;
</div>
<!--- fin bulle -->
 
</body>
 
</html>

Merci !

C'est ce que je cherchais!!