Forum PHP.pl > Zmiana tła + link dla komórki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana tła + link dla komórki

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Sky_walker

26.06.2006, 17:21:20

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

) do konkretnej ramki (wiem, że chodzi o target, tylko jak to połączyć z JS + żeby chodziło dla całej komórki)?

yaro

26.06.2006, 17:59:04

Coś takiego wykombinowałem:

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

[HTML] pobierz, plaintext 
<table>
<tr>
<td class="menu_a">text1</td>
<td class="menu_a">text2</td>
</tr>
</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

Sky_walker

26.06.2006, 18:10:12

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

Tylko jeszcze ten myk z użyciem całej komórki jako link'a...

yaro

26.06.2006, 18:17:59

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ć

Spece od css-ów ci napewno doskolale pomogą, narazie musisze ci ja wystarczyć

bo coś mało osób chyba na forum

[HTML] pobierz, plaintext 
<style>
.menu {
width:120px;
height:20px;
}
.menu_a {
background-image: url(1.gif);
width:120px;
height: 20px;
}
.menu_a:hover {
background-image: url(2.gif);
width:120px;
height: 20px;
 
}
</style>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
<table>
<tr>
<td class="menu"><a href="plik.html" target="_top">
<div href="plik.html" target="_top" class="menu_a"></div></a>
</td>
<td class="menu"><a href="plik.html" target="_top">
<div href="plik.html" target="_top" class="menu_a"></div></a>
</td>
</tr>
</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.

Sky_walker

30.06.2006, 17:58:27

Prawidłowe rozwiązanie na jednej stronie (w końcu.... to rozgryzłem, ale i tak nie samemu):

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <meta name="author" content="MPC SERVICE" />
 
  <style media="all" type="text/css">
#misio td {
background-image: url(file:///D:/web/festo/graphics_std/topcelltop4.jpg);
}
#misio td:hover, #misio td.iehover {
background-image: url(file:///D:/web/festo/graphics_std/pagebg.gif);
cursor: pointer;
}
  </style>
 
<script type="text/javascript">
<!--
iehover = function() {
 var ieh = document.getElementById("misio").getElementsByTagName("td");
 for (var i=0; i<ieh.length; i++) {
  ieh[i].onmouseover=function() {
   this.className+=" iehover";
  }
  ieh[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", iehover);
 
//-->
</script>
</head>
 
<body>
 
<div id="misio">
<table border="1" cellpadding="2" cellspacing="2" width="150">
  <tbody>
    <tr>
      <td onclick="document.location='http://www.mpc.com.pl';">submenu1</td>
      <td>&nbsp; </td>
    </tr>
    <tr>
      <td>&nbsp; </td>
      <td>&nbsp; </td>
    </tr>
  </tbody>
</table>
</div>
<br />
</body>
</html>
[HTML] pobierz, plaintext

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

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.