Advertisement
Guest User

/home/dfiloni/Scrivania/mockup_psm.html

a guest
Sep 11th, 2011
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.20 KB | None | 0 0
  1. <html>
  2. <head>
  3. <style>
  4. #psm {
  5.     position: relative;
  6.     color: #000;
  7.     padding: 10px;
  8.     font-family: Verdana;
  9.     display: block;
  10. }
  11.  
  12. #tooltip-bubble {
  13.     position: relative;
  14.     width: 300px;
  15.     border: 1px solid #000;
  16.     background-color: #fff;
  17.     color: #000;
  18.     padding: 10px;
  19.     font-family: Verdana;
  20.     margin-bottom: 10px;
  21.     margin-left: 50px;
  22. }
  23. </style>
  24. <script>
  25. var timer_id;
  26. var psm = "Test";
  27. var psm2 = "Test 2";
  28. var showed_psm = 2;
  29. var timer_psm;
  30.  
  31. function marquee_psm ()
  32. {
  33.     div = document.getElementById ("psm");
  34.  
  35.     if (showed_psm == 1)
  36.     {
  37.         div.innerHTML = "<img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' />" + psm2;
  38.         showed_psm = 2;
  39.     }
  40.     else if (showed_psm == 2)
  41.     {
  42.         div.innerHTML = "<img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' />" + psm;
  43.         showed_psm = 1;
  44.     }
  45.  
  46.     if (timer_psm)
  47.         clearTimeout (timer_psm);
  48.  
  49.     timer_psm = setTimeout ("marquee_psm ()", 5000);
  50. }
  51.  
  52. function update_div ()
  53. {
  54.     div = document.getElementById ("tooltip");
  55.  
  56.     div.innerHTML = "<div id='tooltip-bubble'><img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' /> <b>email@live.com</b><br /><a href='#' onclick='change_psm(1)'><i>" + psm +"</i></a><br />-----</ br></ br><img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' /> <b>email_2@live.com</b><br /><a href='#' onclick='change_psm(2)'><i>" + psm2 +"</i></a><br /></div>";
  57. }
  58.  
  59. function change_psm (account)
  60. {
  61.     if (account == 1)
  62.         psm = prompt ("New personal message:", psm);
  63.     else if (account == 2)
  64.         psm2 = prompt ("New personal message:", psm2);
  65.    
  66.     if (psm == "")
  67.         psm = "Set a personal message for this account";
  68.     if (psm2 == "")
  69.         psm2 = "Set a personal message for this account";
  70.    
  71.     update_div ();
  72.     marquee_psm ();
  73. }
  74.  
  75. function clear_tooltip ()
  76. {
  77.     document.getElementById ("tooltip").innerHTML = "";
  78. }
  79.  
  80. function tooltip ()
  81. {
  82.     update_div ();
  83.  
  84.     timer_id = setTimeout ("clear_tooltip ()", 5000);
  85. }
  86. </script>
  87. </head>
  88. <body onload="marquee_psm()">
  89. <div>FRIENDLY NAME</div>
  90. <div id="psm" onmouseover="tooltip()"></div>
  91. <div id="tooltip""></div>
  92. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement