login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Overige > Tooltip

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:
  1. <style type="text/css">
  2. html,body {
  3. font-family: Verdana;
  4. font-size: 11px;
  5. color: black;
  6. }
  7. a:link,a:visited,a:active {
  8. color: black;
  9. text-decoration: none;
  10. }
  11. a:hover {
  12. color: black;
  13. text-decoration: underline;
  14. }
  15. <script type="text/javascript">
  16. var tipShown;
  17. var ie = document.all ? true : false;
  18. var yPos;
  19. var xPos;
  20. var ySpacing = 15;
  21. var xSpacing = 15;
  22. document.onmousemove = locateMouse;
  23. function locateMouse(e) {
  24. yPos = (ie == true) ? event.clientY + document.documentElement.scrollTop : e.pageY;
  25. xPos = (ie == true) ? event.clientX + document.documentElement.scrollLeft : e.pageX;
  26. if(tipShown == true) {
  27. document.getElementById('tooltip').style.top = yPos + ySpacing + "px";
  28. document.getElementById('tooltip').style.left = xPos + xSpacing + "px";
  29. }
  30. }
  31. function showTip(text) {
  32. tipShown = true;
  33. document.getElementById('tooltip').style.display = "block";
  34. document.getElementById('innertooltip').innerHTML = text;
  35. }
  36. function hideTip() {
  37. tipShown = false;
  38.  
  39. document.getElementById('tooltip').style.display = "none";
  40. }
  41. </head>
  42. <div id="tooltip" style="display: none; position: absolute; height: 15px; background-color: #ffffcc; border-style: solid; boder-color: black; border-width:
  43. 1px;"><div id="innertooltip" style="margin-left: 2px; margin-right: 2px;"></div></div>
  44. <a onmouseover="showTip('<b>Dit</b> is een voorbeeld van een tooltip!');" onmouseout="hideTip();" style="position: absolute;" href="#">Hoi</a>
  45. </body>
  46. </html>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (7)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.012s