Tooltip
Auteur: Koen - 22 februari 2009 - 14:57 - Gekeurd door: Koen - Hits: 5343 - Aantal punten: 4.30 (5 stemmen)
Een simpel maar handig tooltip scriptje!
Het voorbeeld wijst zichzelf uit
Veel plezier!
|
Code: |
<html>
<head>
<style type="text/css">
html,body {
font-family: Verdana;
font-size: 11px;
color: black;
}
a:link,a:visited,a:active {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
</style>
<script type="text/javascript">
var tipShown;
var ie = document.all ? true : false;
var yPos;
var xPos;
var ySpacing = 15;
var xSpacing = 15;
document.onmousemove = locateMouse;
function locateMouse(e) {
yPos = (ie == true) ? event.clientY + document.documentElement.scrollTop : e.pageY;
xPos = (ie == true) ? event.clientX + document.documentElement.scrollLeft : e.pageX;
if(tipShown == true) {
document.getElementById('tooltip').style.top = yPos + ySpacing + "px";
document.getElementById('tooltip').style.left = xPos + xSpacing + "px";
}
}
function showTip(text) {
tipShown = true;
document.getElementById('tooltip').style.display = "block";
document.getElementById('innertooltip').innerHTML = text;
}
function hideTip() {
tipShown = false;
document.getElementById('tooltip').style.display = "none";
}
</script>
</head>
<body>
<div id="tooltip" style="display: none; position: absolute; height: 15px; background-color: #ffffcc; border-style: solid; boder-color: black; border-width:
1px;"><div id="innertooltip" style="margin-left: 2px; margin-right: 2px;"></div></div>
<a onmouseover="showTip('<b>Dit</b> is een voorbeeld van een tooltip!');" onmouseout="hideTip();" style="position: absolute;" href="#">Hoi</a>
</body>
</html>
html,body { font-family: Verdana; font-size: 11px; color: black; } a:link,a:visited,a:active { color: black; text-decoration: none; } a:hover { color: black; text-decoration: underline; } <script type="text/javascript"> var tipShown; var ie = document.all ? true : false; var yPos; var xPos; var ySpacing = 15; var xSpacing = 15; document.onmousemove = locateMouse; function locateMouse(e) { yPos = (ie == true) ? event.clientY + document.documentElement.scrollTop : e.pageY; xPos = (ie == true) ? event.clientX + document.documentElement.scrollLeft : e.pageX; if(tipShown == true) { document.getElementById('tooltip').style.top = yPos + ySpacing + "px"; document.getElementById('tooltip').style.left = xPos + xSpacing + "px"; } } function showTip(text) { tipShown = true; document.getElementById('tooltip').style.display = "block"; document.getElementById('innertooltip').innerHTML = text; } function hideTip() { tipShown = false; document.getElementById('tooltip').style.display = "none"; } <div id="tooltip" style="display: none; position: absolute; height: 15px; background-color: #ffffcc; border-style: solid; boder-color: black; border-width:
1px;"><div id="innertooltip" style="margin-left: 2px; margin-right: 2px;"></div></div> <a onmouseover="showTip('<b>Dit </b> is een voorbeeld van een tooltip!');" onmouseout="hideTip();" style="position: absolute;" href="#">Hoi </a>
Download code (.txt)
|
|
|
Stemmen |
Niet ingelogd. |
|