fout in FF
Iemand een idee hoe ik dit kan oplossen???
de code in mijn body
Code (php)
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
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
<DIV ID="dek"></DIV>
<SCRIPT TYPE="text/javascript">
<!--
Xoffset=-60; // modify these values to ...
Yoffset= 20; // change the popup position.
var old,skn,iex=(document.all),yyy=-1000;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;
function popup(msg,bak){
var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
yyy=Yoffset;
if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
if(ie4){document.all("dek").innerHTML=content;skn.display=''}
}
function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}
//-->
</SCRIPT>
<a href="http://test.com" ONMOUSEOVER="popup('test','lightgreen')"; ONMOUSEOUT="kill()">test</a>
<SCRIPT TYPE="text/javascript">
<!--
Xoffset=-60; // modify these values to ...
Yoffset= 20; // change the popup position.
var old,skn,iex=(document.all),yyy=-1000;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;
function popup(msg,bak){
var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
yyy=Yoffset;
if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
if(ie4){document.all("dek").innerHTML=content;skn.display=''}
}
function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}
//-->
</SCRIPT>
<a href="http://test.com" ONMOUSEOVER="popup('test','lightgreen')"; ONMOUSEOUT="kill()">test</a>
mijn css:
Code (php)
1
2
3
4
5
2
3
4
5
#dek {
position:absolute;
visibility:hidden;
z-index:200;
}
position:absolute;
visibility:hidden;
z-index:200;
}
Het maakt gebruik van jquery en is makkelijk aan te passen.
Met mootools kan het ook beslist.
Ik krijg nu al een tooltip zowel in ff als ie, alleen krijg ik er geen tekst in Kan je me mss helpen.
mijn code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(function() {
$('#pretty').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
});
</script>
$(function() {
$('#pretty').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
});
</script>
de code om de tooltip op te roepen:
Code (php)
1
<p><span id="pretty" title="I am pretty! - I am a very pretty tooltip, I need lot's of attention from buggers like you! Yes!">And now, for the fancy stuff, a tooltip with an extra class for nice shadows, and some extra content</span></p>
de css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#tooltip.pretty {
font-family: Arial;
border: none;
width: 210px;
padding:20px;
height: 135px;
opacity: 0.8;
background: url('images/shadow.png');
}
#tooltip.pretty h3 {
margin-bottom: 0.75em;
font-size: 12pt;
width: 220px;
text-align: center;
}
#tooltip.pretty div { width: 220px; text-align: left; }
font-family: Arial;
border: none;
width: 210px;
padding:20px;
height: 135px;
opacity: 0.8;
background: url('images/shadow.png');
}
#tooltip.pretty h3 {
margin-bottom: 0.75em;
font-size: 12pt;
width: 220px;
text-align: center;
}
#tooltip.pretty div { width: 220px; text-align: left; }
<span id="pretty"
dan lijkt het me sterk dat dit werkt:
#tooltip.pretty {
Dan zou ik eerder dit verwachten:
<span id="tooltip" class="pretty"
als ik de span zo aanpas dan krijg ik gewoon het kadertje van de tooltip en ben ik mijn tekst kwijt.
vroeger kwam het kaderke van de tooltip als ik boven de tekst kwam, dus dit was juist
Nu heb ik nog een andere vraag. Hoe zou ik nu 2 verschillende tooltips kunnen krijgen??
ik dacht dat ik het zo kon doen:
Code (php)
1
2
3
2
3
<p><span id="pretty" title="tooltip 1">test 1</span></p>
<br><br>
<p><span id="pretty" title="tooltip 2">test 2</span></p>
<br><br>
<p><span id="pretty" title="tooltip 2">test 2</span></p>
Maar wanneer ik dit doe, werkt het op de eerste perfect maar op de tweede niet. wat doe ik verkeerd.