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

**pmartin8** · 28/08/2006, 22h24

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

**Auteur** · 28/08/2006, 23h26

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 :

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

**pmartin8** · 30/08/2006, 15h10

Merci !

C'est ce que je cherchais!!

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

HTML

Discussions similaires

Partager

Partager