Tool-Tip mit HTML


anpassbarer Tooltip mit HTML

change View

  1. <script>
  2. wmtt = null;
  3.  
  4. document.onmousemove = updateWMTT;
  5.  
  6. function updateWMTT(e)
  7. {
  8. x = (document.all) ? window.event.x + document.body.scrollLeft + 180: e.pageX;
  9. y = (document.all) ? window.event.y : e.pageY;
  10. if (wmtt != null)
  11. {
  12. wmtt.style.left = (x + 20 - 180) + "px";
  13. wmtt.style.top = (y + 20) + "px";
  14. }
  15. }
  16.  
  17. function showWMTT(id)
  18. {
  19. wmtt = document.getElementById(id);
  20. wmtt.style.display = "block"
  21. }
  22.  
  23. function hideWMTT()
  24. {
  25. wmtt.style.display = "none";
  26. }
  27. </script>
  28.  
  29.  
  30. <style>
  31. .tooltip2 {
  32. position: absolute;
  33. display: none;
  34. background-color: #FFFFFF;
  35. border-width: 1px;
  36. border-style: solid;
  37. border-color: #000000;
  38. padding: 2px;
  39. }
  40. .tooltip2 .head{
  41. background-color: #006666;
  42. color: white;
  43. font-weight: bold;
  44. padding: 2px;
  45. }
  46. .tooltip2 .content{
  47. color: 000066;
  48. font-size: 10px;
  49. border-size: 4px;
  50. }
  51. .tooltip2 .content td{
  52. width: 50%;
  53. font-size: 10px;
  54. text-align: center;
  55. }
  56. </style>
  57.  
  58.  
  59. <!-- Ab hier die Box info -->
  60. <div class="tooltip2" id="2" style="width: 150px;">
  61. <div class="head">&Uuml;berschrift</div>
  62. <div class="content">
  63. <p>Hier kann <strong>beliebiger Text</strong> stehen!
  64. Der auch beliebig mit <strong>HMTL</strong> angereichert sein kann.</p>
  65. <p>Zum Beispiel auch eine Tabelle:</p>
  66. <table width="100%">
  67. <tr>
  68. <td>Ich</td>
  69. <td>bin</td>
  70. </tr>
  71. <tr>
  72. <td>eine</td>
  73. <td>Tabelle</td>
  74. </tr>
  75. </table>
  76. </div>
  77. </div>
  78. <!-- Ende -->
  79.  
  80.  
  81. <a href="#" onMouseOver="showWMTT('2')" onMouseOut="hideWMTT()">Fahre mit der Maus drüber </a>

eingereicht von admin am 26.08.2007 um 11:00

Rating: 2.3/5 (241 Votings bisher)

Um zu schreiben bitte registrieren!!! | Kommentare anzeigen (0 Einträge) 


 

 

 
Apache Webserver PHP MySql-Server Cascading Style Sheet XHTML Smarty-Template-Engine Debian Stable System

PHP Manual | Domainhandel