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
wojteke
post
Post #2





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

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

Dzięki! Nie wiedziałem, że w dymek można wsadzić img. (IMG:style_emoticons/default/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:

(IMG:http://feniksg.unixstorm.org/ftp/images/dwa_linki.gif)

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.

Ten post edytował wojteke 17.09.2009, 17:34:56
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: 8.10.2025 - 17:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn