Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS]Problem z onmouseout.
Forum PHP.pl > Forum > Przedszkole
terminator211
15.02.2012, 16:59:10
Witam. Otóż mam taki kod: 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5.  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  6.  <link rel="stylesheet" href="style.css" type="text/css" />
  7.  <meta name="Keywords" content="Podstolice, Niepubliczne, Gimnazjum, w, Podstolicach, o, uprawnieniach, szkoły, publicznej, gimnazjum, podstolice" />
  8.  <title>Gimnazjum w Podstolicach</title>
  9.  <script type="text/javascript">
  10.  function pokaz1()
  11.  {
  12.   var pop = document.getElementById('popup1');
  13.   pop.style.top = 280+'px';
  14.   pop.style.left = 335+'px';
  15.   pop.style.display = 'block';
  16.   pop.innerHTML = '<a href="klasa1.html"><img src="images/klasaI200x60.png" alt="Klasa_I"/></a><a href="klasa2.html"><img src="images/klasaII200x60.png" alt="Klasa_II"/></a><a href="klasa3.html"><img src="images/klasaIII200x60.png" alt="Klasa_III"/></a>';
  17.  }
  18.  function wyczysc()
  19.  {
  20.   var pop = document.getElementById('popup1');
  21.   pop.style.display='none';
  22.  }
  23.  function pokaz2()
  24.  {
  25.   var pop = document.getElementById('popup1');
  26.   pop.style.top=580+'px';
  27.   pop.style.left=335+'px';
  28.   pop.style.display='block';
  29.   pop.innerHTML = '<a target="_blank" href="https://uonet.vulcan.net.pl/013515/LoginPage.aspx?ReturnUrl=/start.aspxhttp://"><img src="images/dziennik200x60.png" alt="dziennik" /></a><a href="wywiadowki.php"><img src="images/wywiadowki200x60.png" alt="wywiadowki" /></a>';
  30.  }
  31.  function pokaz3()
  32.  {
  33.   var pop = document.getElementById('popup1');
  34.  
  35.   pop.style.display = 'block';
  36.  }
  37.  </script>
  38. </head>
  39. <body>
  40. <div id="TOP" onmouseover="wyczysc()">
  41. <img src="images/header900x220.png" alt="naglowek" />
  42. </div>
  43. <div id="MENU2" onmouseover="wyczysc()">
  44. <a href="index.html"><img src="images/startowa300x60.png" alt="startowa"/></a><a href="aktualnosci.php"><img src="images/aktualnosci300x60.png" alt="aktualnosci" /></a><a href="kontakt.html"><img src="images/kontakt300x60.png" alt="kontakt" /></a>
  45. </div>
  46. <div id="MENU">
  47. <img src="images/klasy180x60.png" alt="klasy" onmouseover="pokaz1()" class="a"/>
  48. <a href="historia.html"><img src="images/historia180x60.png" alt="historia_podstolic"  onmouseover="wyczysc()" class="a"/></a>
  49. <a href="nauczyciele.html"><img src="images/nauczyciele180x60.png" alt="nauczyciele"  onmouseover="wyczysc()" class="a"/></a>
  50. <a href="galeria.html"><img src="images/galeria180x60.png" alt="galeria"  onmouseover="wyczysc()" class="a"/></a>
  51. <img src="images/planlekcji180x60.png" alt="plan_lekcji"  onmouseover="pokaz3()" class="a"/>
  52. <img src="images/dlarodzicow180x60.png" alt="dla_rodzicow" onmouseover="pokaz2()" class="a"/>
  53. <a href="co_mozemy_zmienic.html"><img src="images/comozemy180x60.png" alt="co_mozemy_zmienic" onmouseover="wyczysc()" class="a"/></a>
  54. </div>
  55. <div id="TRESC">
  56.  <div id='popup1'>
  57.  <img src="images/menu.png" width="200" height="180" border="0" usemap="#map" onmouseout="document.getElementById('popup1').style.display='none';">
  58.  
  59.  <area shape="rect" coords="0,0,200,60" href="klasa1.php" />
  60.  
  61.  <area shape="rect" coords="1,60,200,120" href="klasa2.php" />
  62.  
  63.  <area shape="rect" coords="1,120,200,180" href="klasa3.php" />
  64.  </div>
  65. </div>
  66. <div id="STOPKA">
  67. <img src="images/stopka900x40.png" alt="stopka" />
  68. </div>
  69. </body>
  70. </html>
[HTML] pobierz, plaintext


Jak widać pod divem "popup1" mam mapę obrazu, która domyślnie jest ukryta (display: block). Jest wyświetlane po wjechaniu na element menu o nazwie "klasy" (zmiana display na block). Nastepnie po zjechaniu z tej mapy ma zniknąć. Niestety, mam dziwny problem. Wszystko działa jak chcę, ale do czasu. Mapa wyświetla się normalnie, ale z nika w nieodpowiednim czasie. To tak jakby div o nazwie "popup1" wykrywał tylko 1/3 tej mapy, a reszta należała już do jakiegoś innego elementu. Proszę o pomoc.
kamil4u
15.02.2012, 17:52:23
Wrzuć to gdzieś online. Ciężko się czyta taki kod...
terminator211
16.02.2012, 12:10:38
Moge jeszcze dać arkusz stylów:
[HTML] pobierz, plaintext 
  1. body, html{
  2.  margin: 0;
  3.  padding: 0;
  4.  border: 0;
  5.  color: black;
  6.  background-image: url("images/tlo1600x1200.png");
  7.  background-color: orange;
  8.  background-repeat: no-repeat;
  9.  background-attachment: scroll;
  10. }
  11. #TOP{
  12. width: 1070px;
  13. height: 217px;
  14. float: left;
  15. padding-left: 335px;
  16. }
  17. #MENU{
  18. width: 335px;
  19. float: left;
  20. }
  21. #MENU2{
  22. float: left;
  23. width: 1070px;
  24. margin: 0;
  25. padding-left: 335px;
  26. }
  27. #TRESC{
  28. float: left;
  29. width: 890px;
  30. background: url('images/tlotresci.png');
  31. background-repeat: repeat-y;
  32. padding-left: 5px;
  33. padding-top: 5px;
  34. padding-bottom: 5px;
  35. padding-right: 160px;
  36. min-height: 472px;
  37. }
  38. #STOPKA{
  39. padding-left: 335px;
  40. width: 1070px;
  41. float: left;
  42. height: 40px;
  43. }
  44. #popup1{
  45. width: 200px;
  46. display: block;
  47. background: white;
  48. height: 160px;
  49. }
  50. img.a{
  51. padding-left: 155px;
  52. }
  53. p.title{
  54. color: black;
  55. font-size: 18px;
  56. font-weight: bold;
  57. font-family: 'Castellar';
  58. padding: 0;
  59. margin: 0;
  60. }
  61. p.tresc{
  62. color: black;
  63. font-family: 'Comic Sans MS';
  64. font-size: 17px;
  65. margin: 0;
  66. padding: 0;
  67. line-height: 19px;
  68. font-weight: bold;
  69. }
  70. p.tresc2{
  71. color: black;
  72. font-family: 'Comic Sans MS';
  73. font-size: 17px;
  74. margin: 0, 10px, 0, 0;
  75. padding: 0;
  76. line-height: 19px;
  77. font-weight: bold;
  78. }
  79. img{
  80. border: 0;
  81. }
  82. span.link{
  83. color: blue;
  84. text-decoration: underline;
  85. }
  86. span.hover{
  87. color: blue;
  88. text-decoration: none;
  89. }
  90. span.visited{
  91. color: blue;
  92. text-decoration: underline;
  93. }
  94. #aktualnosci{
  95. width: 878px;
  96. border: 1px dashed #8a8585;
  97. padding: 5px;
  98. margin-bottom: 10px;
  99. }
  100. p.tytul{
  101. color: #5a5858;
  102. font-size: 25px;
  103. font-weight: bold;
  104. padding: 0;
  105. margin-top: 4px;
  106. margin-left: 0;
  107. margin-right: 0;
  108. margin-bottom: 0;
  109. font-family: 'Centaury Gothic';
  110. }
  111. p.data{
  112. color: black;
  113. margin-left: 580px;
  114. margin-right: 0;
  115. margin-bottom: 0;
  116. margin-top: 0;
  117. font-size: 14px;
  118. padding: 0;
  119. }
  120. p.aktualnosc{
  121. margin: 0;
  122. padding: 10px;
  123. }
[HTML] pobierz, plaintext

A to ten obraz, który ma się wyświetlić : http://imageshack.us/photo/my-images/546/menumr.png/
Właśnie ten obraz ma się wyświetlić i rzeczywiście się wyświetla, ale powinno się moć jeździć myszą po nim całym, a znika jak zjadę z pola 'klasa I'. Ma ktoś jakieś pomysły dlaczego div o nazwie popup1 wykrywa akceptuje tylko pole klasa 1, czyli 1/3 obrazu?

Już znalazłem rozwiązanie. Bardzo dziękuję za "pomoc".
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.