[debutant]Affichage coté souris

**drKzs** · 14/06/2006, 21h33

bonjour,

je développe actuellement une appli web, et je voudrais faire la chose suivante:

lorsque la souris survole une zone (un lien, ou autre), une petit cadre (genre infobullle, mais plus grand) s'affiche avec dedans un contenu de mon choix (image, ou autre), et disparais si je quitte cette zone.

Je ne demande pas comment le faire, juste savoir quel tag, outil, concept il faut utiliser pour ça, ensuite je ferai les recherches nécessaires

merci

**MasterOfChakhaL** · 14/06/2006, 21h56

je pense que si tu fais une recherche avec le terme "infobulle" sur le forum javascript, tu trouveras certainement ton bonheur

**Dsphinx** · 15/06/2006, 08h39

Hello...

Tu peux aussi utiliser du DHTML :

Voici un exemple pour t'aider : http://www.ccim.be/ccim328/trucs/info06.html

Cet exemple ne fonctionne que sous IE pour info...

**titoumimi** · 15/06/2006, 09h00

la solution du div visible/invisible est pas mal

**SpaceFrog** · 15/06/2006, 09h24

ou la solution de passer par le hover du a en css ...

**drKzs** · 15/06/2006, 10h19

merci pour les réponses

J'ai le plus compris celle de javascript je vais aller voir de ce coté en premeir, bien que j'ai peur de ne pas pouvoir redimensioner à mon aise, ni de mettre n'importequelles données dedans....

Pour vos deux dernières réponses, j'ai rien compris du tout, euuu google !

merci

**Auteur** · 15/06/2006, 16h43

bonjour,

voici un début. Ce script rempli un input d'après une liste donnée (survole l'input pour afficher la liste, celle-ci disparait lors du clic sur bouton "X") :

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#selection{
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;
}
.Titre{
font-weight: bold;
}
.contenu{
padding: 5px;
overflow: auto;
height: 100px;
}
.contenu div{
margin: 0px;
}
//-->
</style>
 
<script type="text/javascript">
<!--
var idInput=null;
function CacheSelect()
{
 document.getElementById("selection").style.display="none";
}
 
function InsereMsg(obj)
{
 //document.getElementById("idTexte").value = obj.innerHTML;
 document.getElementById(idInput).value = obj.innerHTML;    //idInput : cf. MouseOver()
 divOut(obj);
 CacheSelect();
}
function MouseOver(ev,obj)
{
 
 idInput=obj.id;//On recupere l'id de linput appelant cf. InsereMsg()
 
 var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
 
 var el=document.getElementById("selection");
 
 //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;
}
 
function divOver(obj)
{
 obj.style.backgroundColor="#AAAAFF";
}
function divOut(obj)
{
 obj.style.backgroundColor="";
}
//-->
</script>
 
</head>
 
<body>
<input onmouseover="MouseOver(event,this)" readonly="readonly" type="text" value="Par Defaut" id="idTexte1" name="" size="20">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input onmouseover="MouseOver(event,this)" readonly="readonly" type="text" value="Par Defaut" id="idTexte" name="" size="20">
 
 
<!--- Liste de choix -->
<div id="selection">
<input type="button" value="X" id="BNom" onclick="CacheSelect()">
<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="Titre">Faites votre choix</span><br>
 
<div class="contenu">
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 1</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 2</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 3</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 4</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 5</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 6</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">un tr&egrave;&egrave;&egrave;&egrave;&egrave;s looooong message 7</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 8</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 9</div>
<div onmouseover="divOver(this)" onmouseout="divOut(this)" onclick="InsereMsg(this)">message 10</div>
</div>
</div>
<!--- Fin liste de choix -->
 
</body>
 
</html>

[debutant]Affichage coté souris

HTML

Discussions similaires

Partager

Partager