Infobulle avec un lien d'alerte

Version imprimable

05/09/2012, 14h38
nancy169

Infobulle avec un lien d'alerte

Bonjour,
merci de m'aider car je suis vraiment bloqué, et je dois avancé, je veux que lorsque la souris survole la colonne il m'affiche une infobulle qui contient un lien et losque je click sur ce lui il m'affiche une alerte.
voila le code :

Code:

onmouseover="tooltip.show('Testing 123 ', 200);"

alors comment je peux faire pour au lieu d'afficher seulement le texte Testing 123, il m'affiche le texte Testing 123 plus un lien en bas en clicant sur ce lien il m'affiche une alerte.
merci d'avance :)
05/09/2012, 16h31
SpaceFrog

Code:

onmouseover="tooltip.show('Testing 123 <br /><a href=\"javascript:alert(\'coucou\')\">lien</a>', 200);"
06/09/2012, 00h35
nancy169

Merci infinimet c'est gentil de votre part de me repondre je vais la teste et je reviendrais envers vous pour vous dire le resultat.
Merci encore une fois :)

Ben, M. SpaceFrog merci ca marche très bien.
Mais j'ai trouver un problème, si c'est possible merci de m'aider encore une fois :)
1- Lorsque je veux cliqué sur le lien pour afficher l'alerte je perte l'infobulle, il faut que l'infobulle reste stable lorsque je la survole normalement !!! alors comment faire pour cliqué sur le lien qui se trouve dans l'info-bulle.
2- J'ai un autre problème c'est même que lorsque je quitte la colonne concerné l'infobulle doit disparaitre, par contre dans mon cas elle reste toujours, mais que j'ai indiqué la fonctions hide() dans le onmouseout.
Et voila mon code:
le script contient ca :

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
<script type="text/javascript">
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();
</script>

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
 
<style type="text/css">
#tt {
 position:absolute;
 display:block;
 background:url(images/tt_left.gif) top left no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 background:url(images/tt_top.gif) top right no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}</style>

et les attributs de la colonne contient ca :

Code:

1
2
onmouseover="tooltip.show('Testing  123 <br /><a href=\"javascript:alert(\'coucou\')\">Clic ici pour plus de details</a>', 220);"
onmouseout="tooltip.hide();"

Alors que dois-je faire pour que c'est deux problème se résoudre ?
Merci d'avance, et je suis désolé pour le dérangement.

06/09/2012, 10h32
SpaceFrog

ce qui est normal vu que lors du click sur l'alert (bouton ok) tu es obglié de faire un mouseout
ce qui declenche :

Code:

onmouseout="tooltip.hide();"

supprime le hide sur le mouseout, mais tu devras trouver un autre endroit ou placer ton hide ...

Pour le point de fixé l'infobulle pour cliqué sur le lien c'est résolu, j'ai modifié le code de la fonction pos comme le suivant :
Code:

1 2 3 4 5 6 pos:function(e){ var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; tt.style.top = (u - h + 20) + 'px'; tt.style.left = (l + left - 40) + 'px'; },
et pour le mouse out je l'ai pas encore résolu.
Merci.

Bonjour M. SpaceFrog
y a un petit problème c'est que l'infobulle clignote :cry:
et lorsque j'enlève la modification que j'ai fais au niveau de la fonction pos
Au lieu de :
Code:

1 2 3 4 5 6 pos:function(e){ var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; tt.style.top = (u - h + 20) + 'px'; tt.style.left = (l + left - 40) + 'px'; },
je fais seulement :
Code:

1 2 3 4 5 6 pos:function(e){ var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; tt.style.top = (u - h) + 'px'; tt.style.left = (l + left) + 'px'; },
ou bien j'enlève le lien de l'infobulle :
au lieu de :

Code:

onmouseover="tooltip.show('Testing 123 <br /><a href=\"javascript:alert(\'coucou\')\">lien</a>', 200);"

je fais seulement :

Code:

onmouseover="tooltip.show('Testing 123', 200);"

elle clignote pas, ca veut dire que soit je peux mettre le lien à l'infobulle ou bien je met le changement de la fonction pos.
alors que dois-je faire ?? :cry: aidez moi et merci d'avance;

12/09/2012, 19h21
nancy169

1 pièce(s) jointe(s)

A vrai dire ce il me faut que la tooltip reste fixe si je la survole et disparu si je la quitte ou bien je quitte la case, comme montre l'exemple suivant :

http://jquerytools.org/demos/tooltip/any-html.html
et voila mon code :
vous allez voir que la tooltip clignote

Bonjour,
J'ai réglé le problème en ajoutant un un événement onClick sur la tooltip, alors losrque je clique sur un simple texte qui apparait avec un style de lien, l’alerte s'affiche sans que le tooltip clignote, et voila le code qui montre ce que je viens d'exliquer, pour ceux qui en besoin :

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
98
<script type="text/javascript">
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w,a){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
//    tt.onclick = function() { alert(a); };
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
 
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   tt.onclick = function() { alert(a); };
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h + 20) + 'px';
   tt.style.left = (l + left - 40) + 'px';
   /*tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';*/
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  },
 };
}();
</script>
<style type="text/css">
 
#tt {
 position:absolute;
 display:block;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#f0f1e8;
 color:#000000;
 font-family: serif;
 border: 4px solid #4b6447;
 }
 
</style>

Code:

1
2
tooltip.show('- blablablabla <br /><U style="color: blue;"><FONT color="blue">Plus de détails</FONT></U>', 200,' - blablablabla \n - blablablabla');
tooltip.hide();