Discussion :

[nancy169]

Bonjour,
J'ai créer une infobulle, avec un lien a l'intérieur de cette dernière.
Lorsque je survole une image une infobulle s'affiche, et cette infobulle doit resté fixe pour je puis cliqué sur le lien qui ce trouve dedans, alors que le problème c'est que l'infobulle suive mon curseur et ne reste pas fixe pour que je puis cliqué sur le lien et voila mon code :

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
<script type="text/javascript">
var tooltip=function(){
var showDelay=1000;// show after delay of 1 second
var showFor=1000; // show for 3 seconds
showEffect= "slideDown";
hideEffect= "slideUp";
 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);
  },
//******************************************************************
  	pausecomp :function(millis){
		var date = new Date();
		var curDate = null;
 
		do { curDate = new Date(); }
		while(curDate-date < millis);
	},
//******************************************************************
	showdelay: function(v,w,t){
		showFor= t ? t:showDelay;
		this.pausecomp(showDelay);
		this.show(v,w);
		setTimeout ( "tooltip.hide();", showFor );
	}
//******************************************************************
		/*popitup function (url) {
			newwindow=window.open(url,'name','height=200,width=150');
			if (window.focus) {newwindow.focus()}
			return false;
		}*/
 };
}();
</script>
 
<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:#FFFFFF;
 color:#5e81ab;
  font-weight:bold;
 
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}
</style>

et dans le mouseover :

Code :

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

tooltip.showdelay('P1 = Engagements soumis / credits definitifs <br /><a href=\"javascript:alert(\'coucou\')\">Clic ici pour plus de details</a>', 220,6000);

Alors que dois-je faire pour régler ce problème.
Merci de m'aider, merci d'avance

[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';
  },

Merci.