Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Zmiana tła + link dla komórki
Sky_walker
post
Post #1





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

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

Jak zmienić obrazek w tle komórki tabeli po najechaniu na nią myszką?
Jak zrobić link z tej komórki (i tekstu w niej się znajdującego - choć to akurat wiem winksmiley.jpg) do konkretnej ramki (wiem, że chodzi o target, tylko jak to połączyć z JS + żeby chodziło dla całej komórki)?

Ten post edytował Sky_walker 26.06.2006, 18:07:33


--------------------
Pomogłem? Kliknij poniżej.
Dzięki! :D
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
yaro
post
Post #2





Grupa: Zarejestrowani
Postów: 160
Pomógł: 4
Dołączył: 22.04.2006
Skąd: Kraków

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

Coś takiego wykombinowałem:

[HTML] pobierz, plaintext 
  1. <style>
  2. .menu_a {
  3. background-image: url(1.gif);
  4. }
  5. .menu_a:hover {
  6. background-image: url(2.gif);
  7. }
  8. </style>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <table>
  2. <tr>
  3. <td class="menu_a">text1</td>
  4. <td class="menu_a">text2</td>
  5. </tr>
  6. </table>
[HTML] pobierz, plaintext


co do dalszej części to razaz się tym zajmę, choć nie zadobrze sie znam na takich rzeczach postaram sie pomóc.

ps: Bardzo proszę, uprzejmie żeby jednak stosować się do zasad panujących na tym forum, oczywiście chodzi mi o to abyś poprawił temat

Ten post edytował yaro 26.06.2006, 17:59:44


--------------------
AJAX in.pl - Trochę o AJAX 'ie i JavaScript
JSCache 1.2 - DOM Storage - przechowuj dane po stronie user'a, na stałe!
Go to the top of the page
+Quote Post
Sky_walker
post
Post #3





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

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

Lepiej? coś nie moge określić swojego problemu w dwóch słowach :/
Ktoś ma jakiś pomysł jak to zatytułować?

Ale pomysł z użyciem stylów dla zmiany tła bardzo dobry smile.gif Tylko jeszcze ten myk z użyciem całej komórki jako link'a...
smile.gif

Ten post edytował Sky_walker 26.06.2006, 19:11:00


--------------------
Pomogłem? Kliknij poniżej.
Dzięki! :D
Go to the top of the page
+Quote Post
yaro
post
Post #4





Grupa: Zarejestrowani
Postów: 160
Pomógł: 4
Dołączył: 22.04.2006
Skąd: Kraków

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

Zrobiłem coś takiego, ale uwaga, to pewnie nie jest dobrze, zgodnie ze standardami zrobione. Wiem, wiem jak nie wiedziałem to po co sie zabierałe, ale jak już zabrałem się to wolałem dokończyć smile.gif
Spece od css-ów ci napewno doskolale pomogą, narazie musisze ci ja wystarczyć smile.gif bo coś mało osób chyba na forum
[HTML] pobierz, plaintext 
  1. <style>
  2. .menu {
  3. width:120px;
  4. height:20px;
  5. }
  6. .menu_a {
  7. background-image: url(1.gif);
  8. width:120px;
  9. height: 20px;
  10. }
  11. .menu_a:hover {
  12. background-image: url(2.gif);
  13. width:120px;
  14. height: 20px;
  15.  
  16. }
  17. </style>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <table>
  2. <tr>
  3. <td class="menu"><a href="plik.html" target="_top">
  4. <div href="plik.html" target="_top" class="menu_a"></div></a>
  5. </td>
  6. <td class="menu"><a href="plik.html" target="_top">
  7. <div href="plik.html" target="_top" class="menu_a"></div></a>
  8. </td>
  9. </tr>
  10. </table>
[HTML] pobierz, plaintext


A jeszcze, zmień tytuł zgodnie z regulaminem, bo to naprawde później innym pomaga, np. w wyszukaniu takiego samego problemu itp

Raczej takie rzeczy robi sie właśnie w stylach, js nie jest to tego potrzebny.


--------------------
AJAX in.pl - Trochę o AJAX 'ie i JavaScript
JSCache 1.2 - DOM Storage - przechowuj dane po stronie user'a, na stałe!
Go to the top of the page
+Quote Post
Sky_walker
post
Post #5





Grupa: Zarejestrowani
Postów: 214
Pomógł: 23
Dołączył: 26.09.2005

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

Prawidłowe rozwiązanie na jednej stronie (w końcu.... to rozgryzłem, ale i tak nie samemu):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.   <title>test</title>
  6.   <meta name="author" content="MPC SERVICE" />
  7.  
  8.   <style media="all" type="text/css">
  9. #misio td {
  10. background-image: url(file:///D:/web/festo/graphics_std/topcelltop4.jpg);
  11. }
  12. #misio td:hover, #misio td.iehover {
  13. background-image: url(file:///D:/web/festo/graphics_std/pagebg.gif);
  14. cursor: pointer;
  15. }
  16.   </style>
  17.  
  18. <script type="text/javascript">
  19. <!--
  20. iehover = function() {
  21.  var ieh = document.getElementById("misio").getElementsByTagName("td");
  22.  for (var i=0; i<ieh.length; i++) {
  23.   ieh[i].onmouseover=function() {
  24.    this.className+=" iehover";
  25.   }
  26.   ieh[i].onmouseout=function() {
  27.    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  28.   }
  29.  }
  30. }
  31. if (window.attachEvent) window.attachEvent("onload", iehover);
  32.  
  33. //-->
  34. </script>
  35. </head>
  36.  
  37. <body>
  38.  
  39. <div id="misio">
  40. <table border="1" cellpadding="2" cellspacing="2" width="150">
  41.   <tbody>
  42.     <tr>
  43.       <td onclick="document.location='http://www.mpc.com.pl';">submenu1</td>
  44.       <td>&nbsp; </td>
  45.     </tr>
  46.     <tr>
  47.       <td>&nbsp; </td>
  48.       <td>&nbsp; </td>
  49.     </tr>
  50.   </tbody>
  51. </table>
  52. </div>
  53. <br />
  54. </body>
  55. </html>
[HTML] pobierz, plaintext

I to^^^^ działa również pod IE w przeciwieństwie do skryptu yaro'a.

Ten post edytował Sky_walker 30.06.2006, 17:59:13


--------------------
Pomogłem? Kliknij poniżej.
Dzięki! :D
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

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

 

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

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

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