Sagtens, og det kan laves på flere måder ...
-- hvis du ikke har så mange, vil det nok være mest overskueligt simpelthen at have en stribe divs til de forskellige links, f.eks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Show tooltip</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tooltip{position:absolute;top:0;left:0;visibility:hidden;border:1px solid black;padding:3px;background:#DCE7E0;font-family:verdana;font-size:10px;}
</style>
<script type="text/javascript">
var Ymouse = Xmouse = 0;
var ns6 = (document.getElementById && !document.all)?true:false;
var d = (ns6)?window:document;
d.onmousemove = getMousePos;
function getMousePos(evnt) {
Ymouse = (ns6)?evnt.pageY:event.y;
Xmouse = (ns6)?evnt.pageX:event.x;
}
function show(elm){
if(document.getElementById){
document.getElementById(elm).style.visibility = 'visible';
}else if(document.all){
document.all[elm].style.visibility = 'visible';
}
var inf = (ns6)?document.getElementById(elm):document.all[elm];
inf.style.left = Xmouse + 15;
inf.style.top = Ymouse;
}
function hide(elm){
if(document.getElementById){
document.getElementById(elm).style.visibility = 'hidden';
}else if(document.all){
document.all[elm].style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<a href="#" id="link" onmouseout="hide('info1');" onmouseover="show('info1');">Hej</a><br><br>
<div id="info1" class="tooltip">Hej med dig, 1<br> - skal vi have en lille sludder?</div>
<a href="#" id="link" onmouseout="hide('info2');" onmouseover="show('info2');">Hej</a><br><br>
<div id="info2" class="tooltip">Hej med dig, 2<br> - skal vi have en lille sludder?</div>
<a href="#" id="link" onmouseout="hide('info3');" onmouseover="show('info3');">Hej</a><br><br>
<div id="info3" class="tooltip">Hej med dig, 3<br> - skal vi have en lille sludder?</div>
<a href="#" id="link" onmouseout="hide('info4');" onmouseover="show('info4');">Hej</a><br><br>
<div id="info4" class="tooltip">Hej med dig, 4<br> - skal vi have en lille sludder?</div>
<a href="#" id="link" onmouseout="hide('info5');" onmouseover="show('info5');">Hej</a><br><br>
<div id="info5" class="tooltip">Hej med dig, 5<br> - skal vi have en lille sludder?</div>
</body>
</html>
-- det spiller ingen trille hvilken rækkefølge links og info-divs har, men det er meget vigtigt at id i diverne stemmer overens med de navne funktionerne bliver kaldt med !-)
-- iøvrigt kan det også sagtens laves mere generisk, så man måske tog udgangspunkt i en property på linket, når man skulle vise noget !-)
-- en fuldstændig anden tilgangsvinkel kunne være at genbruge den samme div, men så udskifte indholdet efter hvilket link, som skulle vises !o]
Og så kan man faktisk smide mange forskellige ting ind i sådan en fætter, et mere kuriøst eksempel kan findes her:
http://www.eksperten.dk/spm/510856 !-)
Ny bruger
Nybegynder
Opret
Preview
