Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tooltip - problem
Forum PHP.pl > Forum > Po stronie przeglądarki
Robert93
13.10.2010, 18:27:00
Witam.

Mam problem z tooltipem.
Chcę aby tooltip wyświetlał się po najechaniu na napis "OPIS" i na obrazku obok (1.jpg), a nie w całym wierszu aż do końca.

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html
  2.     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=8" />
  8. <meta http-equiv="Content-Language" content="pl" />
  9. <body background="tlo.jpg">
  10. <body leftmargin="200">
  11. <body marginwidth="200">
  12. </body>
  13.     <style>
  14.         span {
  15.             display:none;
  16.             position:absolute;
  17.             z-index:1000;
  18.             -moz-border-radius:4px;
  19.             -webkit-border-radius:4px;
  20.         }
  21.  
  22.         .tooltip-style1 {
  23.             background:#5a85a5 url(2.jpg) center no-repeat;
  24.             color:white;
  25.             height:256px;
  26.             width:640px;
  27.  
  28.         }
  29.  
  30.         pre {
  31.             font-size:10px;
  32.         }
  33.  
  34.     select.icon-menu option {
  35. background-repeat:no-repeat;
  36. background-position:bottom left;
  37. padding-left:20px;
  38. }
  39.  
  40. </style>
  41.  
  42.     <!-- load jQuery from Google AJAX Libraries API -->
  43.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  44.     <script type="text/javascript">
  45.     $(document).ready(function() {
  46.          $(".tooltips").hover(
  47.             function() { $(this).contents("span:last-child").css({ display: "block" }); },
  48.             function() { $(this).contents("span:last-child").css({ display: "none" }); }
  49.         );
  50.  
  51.         $(".tooltips").mousemove(function(e) {
  52.             var mousex = e.pageX + 10;
  53.             var mousey = e.pageY + 5;
  54.             $(this).contents("span:last-child").css({  top: mousey, left: mousex });
  55.         });
  56.      });
  57.     </script>
  58.  
  59. </head>
  60.  
  61. <body >
  62. <BR>
  63. <BR>
  64. <BR>
  65. <div id="header_container" class="grid_16"><div id="header_wrapper" class="tooltips">OPIS :
  66. <img src="1.jpg" width="15" height="20" border="0" /><span class="tooltip-style1"></span>
  67.             </div>
  68.         </div>
  69. </body>
[PHP] pobierz, plaintext
erix
13.10.2010, 20:58:40
Temat: JavaScript jesli Twoj watek go dotyczy KONIECZNIE przeczytaj
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.