Discussion :

[nancy169]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[nancy169]

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 :

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

Sélectionner tout - Visualiser dans une fenêtre à part

onmouseout="tooltip.hide();"

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

[nancy169]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.