Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Obrazek w ustalonej pozycji z tabeli
Forum PHP.pl > Forum > Przedszkole
wojteke
15.09.2009, 21:32:07
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:



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!
erix
16.09.2009, 10:39:14
http://osiolki.net/tabelki
wojteke
16.09.2009, 21:53:17
No wiem, wiem, że tabele są złe i w ogóle ale ciężko mi jest się przestawić, gdy używam parę skryptów tj. tablesorter. Na dobrą sprawę chodzi tutaj o prawdziwą tabelkę z "danymi tabelarycznymi". Wyjątkowo chciałbym, by po najechaniu myszką na jedną z komórek, pojawił się z boku obrazek ale w ustalonej pozycji (px w lewo). Wiecie może jak to zrobić nie używając CSS'a, tylko javascript'a?
zegarek84
17.09.2009, 11:01:57
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ń 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
wojteke
17.09.2009, 17:30:43
Dzięki! Nie wiedziałem, że w dymek można wsadzić img. yahoo.gif

Mam jeszcze jeden problem. Mam nadzieję, że do niego też nie trzeba zastosować JS, chociaż widać, że chyba tutaj trzeba wstawić jakieś warunki.

Problem przedstawiam w poniższym screenie by klarowniej to wyglądało:



I poniżej podaję kod:

[HTML] pobierz, plaintext 
  1. <br /><br /><br /><br /><br /><br /><br /><br />
  2.  
  3. <center>
  4. <table border="1">
  5.     <tbody>
  6. 		<tr>
  7. 			<td> 	
  8. 				<a href="http://google.pl/" alt="teskt alternatywny">
  9. 					<div class="avatar_miniaturka">
  10. 						<img src="avatar.gif" border="0" onmouseover="this.src = 'avatar_active.gif'" onmouseout="this.src = 'avatar.gif'" >
  11. 						<div class="avatar">
  12. 							<img src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Crystal_Clear_mimetype_image.png">
  13. 						</div>
  14. 					</div>
  15. 				</a>
  16. 				<div class="prowadzacy_link">
  17. 					<a href="http://google.pl/" alt="teskt alternatywny">
  18. 						napis
  19. 					</a>
  20. 				</div>
  21. 			</td>
  22. 		</tr>
  23. 	</tbody>
  24. </table>
  25. </center>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. a {
  2. 	color: #660000;
  3. 	text-decoration:none;
  4. }	
  5. a:active {
  6. 	text-decoration: underline;
  7. }
  8. a:hover {
  9. 	text-decoration: underline;
  10. }
  11.  
  12. img {
  13. 	border: none;
  14. }
  15.  
  16.  
  17. /**/
  18.  
  19.  
  20. a .avatar {
  21. visibility:hidden;
  22. position:absolute;
  23. }
  24.  
  25. a:hover .avatar {
  26. visibility:visible;
  27. margin-left:-150px;
  28. margin-top:-60px;
  29. }
  30.  
  31. .avatar_miniaturka{
  32. 	width: 16px;
  33. 	height: 16px;
  34. 	float: left;
  35. }
  36. .avatar_miniaturka :active{
  37. 	width: 16px;
  38. 	height: 16px;
  39. }
  40.  
  41. .prowadzacy_link{
  42. 	float: left;
  43. 	width: 50px;
  44. 	text-align: center;
  45. }
[CSS] pobierz, plaintext


Bardzo proszę o pomoc, bo naprawdę nie mam zielonego pojęcia jak to zrobić. W Internecie czy "szukajką" na forum też niczego ciekawego nie znalazłem.
zegarek84
17.09.2009, 19:32:08
da się to zrobić przy pomocy tylko samego css - najpierw chciałem zrobić rozwiązanie niby popularne - ale w praktyce musiałbyś sporo w stylach zmieniać - zrobiłem rozwiązanie "uniwersalne" gdzie kod powinieneś zrozumieć bez problemu - tam w kodzie wstawia się tylko te trzy obrazki przy czym ten trzeci który jest pierwszym wyświetlanym obrazkiem nie musi mieć przypisanej klasy - z kolei te ukrywane obrazki muszą być przed tym trzecim (dało by się jeszcze inaczej ale szkoda komplikować) - obrazki do przykładu z forum:
[EDIT] ps - tutaj obrazki mają rużny rozmiar więc ten pierwszy nie jest "schowany" - mógłbym go w css ukryć [i jeśli w praktyce będziesz miał też obrazki różnej wielkości to napisz to poprawię i się ukryje bo to moment] ale jest on normalnie przesłonięty przez to drugie tło więc nie widzę potrzeby a lepiej Ci to zobrazuje - zresztą css jest krótki to tu już powinieneś wiedzieć co zrobić winksmiley.jpg
[HTML] pobierz, plaintext 
  1. <html><head><title>test</title><style>
  2. a {color: #660000;text-decoration:none;}
  3. a:active {text-decoration: underline;}
  4. a:hover {text-decoration: underline;}
  5.  
  6. .powiekszony, .tlo2 {position:absolute;visibility:hidden}
  7. .powiekszony {margin-left:-300px}
  8. a:hover .tlo2{visibility:visible}
  9.  
  10. a .img:hover .powiekszony {visibility:visible}
  11. </style></head>
  12. <body>
  13. <br /><br /><br /><br /><br /><br /><br /><br />
  14.  
  15. <center><table border="1"><tbody><tr>
  16.                         <td>
  17.          <a href="#">
  18.              <b class="img">
  19.                  <img class="powiekszony" src="http://www.google.pl/intl/en_com/images/logo_plain.png" />
  20.                  <img class="tlo2" src="http://forum.php.pl/uploads/av-29013.jpeg" />
  21.                  <img class="tlo1" src="http://forum.php.pl/uploads/av-10281.jpg" />
  22.              </b>
  23.           tresc linka</a>
  24.                          </td>
  25.                          <td>druga komórka ;p</td>
  26. </tr></tbody></table></center>
  27. </body></html>
[HTML] pobierz, plaintext


ps. zamiast obrazka "powiększony" możesz wstawić inny element BLOKOWY lub w stylach mu nadać właściwość blokową z tą klasą tworząc jakiś bardziej rozbudowany dymek winksmiley.jpg
wojteke
17.09.2009, 21:25:31
WIELKIE DZIĘKI yahoo.gif oczywiście dokładnie przeanalizowałem jak to się robi - dzięki za lekcję haha.gif
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.