Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JS] Obrazek w ustalonej pozycji z tabeli
wojteke
post
Post #1





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 17.07.2009

Ostrzeżenie: (0%)
-----

Witam

Chciałbym, by po najechaniu na pole danej komórki w tabeli, w ustalonej pozycji wyświetlił się obrazek z boku komórki. Nie wiem czy dobrze kombinuję, dlatego zwracam się do Was o pomoc. Właściwie już prawie udało mi się osiągnąć zamierzony efekt. Problem mam tylko taki, że używając stylu css: position: relative; obrazek, który mi się wyświetla obok, zajmuje dodatkowo miejsce w komórce, z której rzekomo został "przesunięty".

Sytuacje doskonale widać na poniższym screenie:

(IMG:http://www.fothost.pl/upload/09/38/979f443e.gif)

Przedstawiam kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.   <style type="text/css">
  4. div.submenu
  5. {
  6.   position: relative;
  7.   left: -150px;
  8.   top: -75px;  
  9.   visibility: hidden;
  10. }
  11. </style>
  12.  
  13.   <script type="text/javascript">
  14. <!--
  15. function Pokaz(nazwa)
  16. {
  17.   document.getElementById(nazwa).style.visibility = 'visible';
  18.   document.getElementById(nazwa).parentNode.style.backgroundColor = 'green';
  19. }
  20. function Ukryj(nazwa)
  21. {
  22.   document.getElementById(nazwa).style.visibility = 'hidden';
  23.   document.getElementById(nazwa).parentNode.style.backgroundColor = 'Transparent';
  24. }
  25. //-->
  26.   </script>
  27.  
  28. </head>
  29. <br /><br /><br /><br /><br />
  30. <body>
  31. 	<center>
  32. 	  <table border="1">
  33. 		<tr>
  34. 		<td class="menuitem" onmouseover="Pokaz('SubMenu1')" onmouseout="Ukryj('SubMenu1')">
  35. 			napis
  36. 			<div id="SubMenu1" class="submenu">
  37. 				<img src="image.jpg" border="0px">
  38. 			</div>
  39. 		</td>
  40. 		</tr>
  41. 	  </table>
  42. 	</center>  
  43. </body>
  44. </html>
[HTML] pobierz, plaintext


position: absolute; nie wchodzi chyba w grę, bo chciałbym, by zawsze obrazek pojawiał się w tym samym miejscu na stronie.

Pozdrawiam!

Ten post edytował wojteke 15.09.2009, 23:09:09
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
zegarek84
post
Post #2





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

bardzo to mógłbyś to zrobić bez js tylko używając css.... ale skoro chcesz w js to musisz obliczyć pozycję komórki tabeli względem dokumentu (w jquery była odpowiednia własność) - możesz w sumie do wyznaczenia tej pozycji wspomóc się w czystym js jeszcze getComputedStyle - zwróci Ci to obiekt z właściwościami przeliczonymi względem głównego dokumentu - mając tą właściwość po prostu w obliczonej pozycji wyświetlisz dymek który nie będzie się ruszał - ale w sumie na to jest wiele rozwiązań (IMG:style_emoticons/default/winksmiley.jpg) [jak mawiają każda droga prowadzi do Rzymu)

ok - ale co Ci szkodzi CSS samo??
może to Cię zainteresuje jeszcze ;p - wcześniej nakierowywałem na to na co sam się uparłeś ;p
[HTML] pobierz, plaintext 
  1. <html><head><style>
  2. td .hide {visibility:hidden;position:absolute;}
  3. td:hover .hide {visibility:visible;margin-left:-200px}
  4. </style></head>
  5. <body>
  6. <br /><br /><br /><br /><br /><br /><br /><br />
  7. <center>
  8. <table border="1">
  9.       <tbody><tr>
  10.       <td> <div class="hide">
  11. 		      <img src="http://www.google.pl/intl/en_com/images/logo_plain.png"><br /> umyślałem sobie dymek ;p - równie dobrze klasa mogła być tylko do obrazka przypisana ;)
  12. 	      </div>
  13. 	      napis g h  gsdf sdfd gdsf sdgdfsfg dfs dfsg sdg ds   
  14.       </td>
  15.       </tr>
  16. </tbody></table>
  17. </center>
  18. </body></html>
[HTML] pobierz, plaintext


Ten post edytował zegarek84 17.09.2009, 11:07:14
Go to the top of the page
+Quote Post

Posty w temacie
- wojteke   [JS] Obrazek w ustalonej pozycji z tabeli   15.09.2009, 21:32:07
- - erix   http://osiolki.net/tabelki   16.09.2009, 10:39:14
- - wojteke   No wiem, wiem, że tabele są złe i w ogóle ale cięż...   16.09.2009, 21:53:17
- - zegarek84   bardzo to mógłbyś to zrobić bez js tylko używając ...   17.09.2009, 11:01:57
- - wojteke   Dzięki! Nie wiedziałem, że w dymek można wsadz...   17.09.2009, 17:30:43
- - zegarek84   da się to zrobić przy pomocy tylko samego css - na...   17.09.2009, 19:32:08
- - wojteke   WIELKIE DZIĘKI oczywiście dokładnie przeanalizo...   17.09.2009, 21:25:31

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 10.10.2025 - 20:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn