[CSS] zmieniany bgcolor innej komórki Opcje

[aleksander]

Kod

<tr>

  <td id="menu1" bgColor="#800000">

    &nbsp;

  </td>

  <td onmouseover="menu1.bgColor='#FF8000'" onmouseout="menu1.bgColor='#800000'">

    Menu

  </td>

</tr>

Czy można coś analogicznego zrobić w CSS? Gdy mam jeden <td> to nie problem, ale czy da się, gdy są dwie komórki?

Dodam tylko, że próbowałem zastosować CSS dla <tr> ale ten znacznik w ogóle się nie 'styluje'.

[Dominik]

Dodam tylko, że próbowałem zastosować CSS dla <tr> ale ten znacznik w ogóle się nie 'styluje'.

Niemozliwe, kazdy znacznik inny niz display:none powinien "stylowac". W tabelam masz wiele mozliwosci, od wspomnianieho tr, bo "bardziej dokladne" <tbody> (czy <thead> czy <tfoot>) az po tak wyrafinowane jak <col /> czy dokladniej <colgroup>

[Dawid Pytel]

To napewno działa:

[xml:1:7ead34e243]
<tr onMouseOver="this.bgColor='#FF8000';" onMouseOut="this.bgColor='#800000';">
[/xml:1:7ead34e243]

[aleksander]

ale właśnie chodzi mi o napisanie podświetlania zgodnego z XHTML, i żeby Mozilla poprawnie odczytywała ten 'skrypt'.

[Draugfor]

Kod

<td onmouseover="this.className='podswtl'">

Wielkosc liter ma znaczenie, podswtl to nazwa stylu z Twojego css's. Zgodne z XHTML Strict.

A w css'ie:

Kod

.podswtl { background-color: #212121;}

Dodaj jeszcze analogicznie onmouseout, zeby zmienial kolor z powrotem.

Pozdrawiam!

[aleksander]

wszystko git ale tylko w tym śmierdzącym IE! W molzilli to nie działa:
[xml:1:19db980345] <table border="0">
<tr>
<td id="menu">MENU</td>
<td onmouseover="menu.className='pod'" onmouseout="menu.className='pod2'">NAJEDZ</td>
</tr>
</table>[/xml:1:19db980345]

Ma ktoś jakiś pomysł

[Vir]

Być może troszeczkę odbiegam od tematu, ale może przyda się Tobie lub innemu użytkownikowi rozwiązanie, które przedstawiam poniżej.
Dzięki napisanemu przeze mnie skryptowi nie musisz bawić się we wstawianie dodatkowych funkcji w znacznik TD. Poniższy skrypt ustawia zdarzenie onmouseover i onmouseout dla wszystkich znaczników TD na danej stronie.

[xml:1:77053b236f]function set()

{

var allTDs = document.all.tags('TD');

var onColor = '#FF8000';
var offColor = '#FFFFFF';

for ( var i=0; i<allTDs.length; i++ )

{
allTDs[i].onmouseover=function(){ this.style.backgroundColor = onColor; }
allTDs[i].onmouseout=function(){ this.style.backgroundColor = offColor; }
}

}[/xml:1:77053b236f]

I w ramach Body: [xml:1:77053b236f]onload="set()"[/xml:1:77053b236f]

LUB

Jeżeli chcesz pokolorować tylko określony obszar znaczników TD to skrypt ten powinien wyglądać następująco:

[xml:1:77053b236f]function set() {

var allTDs = document.bgc.getElementsByTagName('TD');

var onColor = '#FF8000';
var offColor = '#FFFFFF';

for ( var i=0; i<allTDs.length; i++ )

{
allTDs[i].onmouseover=function(){ this.style.backgroundColor = onColor; }
allTDs[i].onmouseout=function(){ this.style.backgroundColor = offColor; }
}

}[/xml:1:77053b236f]

a znaczniki TD, które mają być objęte powyższym skryptem (mają być kolorowane) wrzucasz w znacznik [xml:1:77053b236f]<form name="bgc"></form>[/xml:1:77053b236f]

Ps.
Przetestowano na IE 6.0.

[Dominik]

Przetestowano na IE 6.0.

Nie trzeba testowac, zeby dojsc do wniosku ze document.all moze zadzialac tylko na przegladarkach nieprzestrzegajacych standardow czyli IE a na innych zgodnych ze standardami nie.

[Draugfor]

@Olo: oczywiscie, ze dziala. I na IE, i na Operze, i na Mozilli. Sam sprawdzalem. Zainstaluj moze nowsza wersje swojej przegladarki i upewnij sie, czy masz wlaczona obsluge Java Script.

[Vir]

Przetestowano na IE 6.0.

Nie trzeba testowac, zeby dojsc do wniosku ze document.all moze zadzialac tylko na przegladarkach nieprzestrzegajacych standardow czyli IE a na innych zgodnych ze standardami nie.

No to trzeba zastosować drugi sposób i wrzucić co się chce (np. całą tabelę) w znacznik form.
Chyba, że to także niezgodne ze standardami

[Paul]

document.all

lepiej stosowac

Kod

document.getElementById('jakies_id');

[Dominik]

document.all

lepiej stosowac

Kod

document.getElementById('jakies_id');

Troche ten cytat wyrwany z kontekstu, bo dokladnie mi w nim chodzilo o to ze zgodnie ze standardami powinno uzywac sie getElementById ale akurat tutaj bardziej pasuje getElementsByTagName.

[aleksander]

[xml:1:21620f4938]<table border="0">
<tr>
<td id="menu">
MENU
</td>
<td onmouseover="menu.className='pod'" onmouseout="menu.className='pod2'">
NAJEDZ
</td>
</tr>
</table> [/xml:1:21620f4938]

Czy takie rozwiązanie jest zgodne z XHTML Strict lub Transitional? Jeżeli tak, to powinno bez problemu chodzić na Mozilli, a na mojej (v. 1.6) nie chodzi, a np. podswietlane menu w headerze na www.php.pl tak.

[Draugfor]

Jest zgodne, ale to nie ma znaczenia na interpretowanie go przez przegladarki. Osobiscie posiadam rowniez Mozille v1.6 i zaproponowane przeze mnie rozwiazanie dziala bez zarzutu.

Olo, chcialbym zwrocic Twoja uwage na strone konsorcjum w3 (www.w3.org), na ktorej znajduje sie html validator, ktory sprawdzi, czy stworzona strona jest poprawnym dokumentem zadeklarowanego w naglowku typu. Wystarczy, ze zapiszesz kod wygenerowanej strony w pliku i potem kazesz validatorowi go sprawdzic.

Jest jeszcze jedna rzecz, byc moze to jest przyczyna.
Zauwazylem, ze przegladarki nie maja sklonnosci do aktualizowania plikow css przechowywanych offline. Jesli najpierw dolaczyles plik css, wygenerowales strone w Mozilli i dopiero potem dopisales w niej lub zmodyfikowales klase pod2 - to Mozilla korzysta i tak ze starego pliku css przed modyfikacjami.
Moja rada: tymczasowo w swoim pliku, w ktorym sa zmiany koloru tabelki onmouoseover, zmien nazwe ladowanego stylu np. styl.css na nowy_styl.css. Plik nowy_styl.css musi byc identyczny z plikiem styl.css, ale ze jest nowy, przegladarka zaladuje go w aktualnej wersji, uwzgledniajac wszelkie naniesione od czasu ostatniego ladowania zmiany.

Wtedy wszystko powinno dzialac. Bo na mojej Mozilli chodzi bez zarzutu.

[Dominik]

zmien nazwe ladowanego stylu np. styl.css na nowy_styl.css.

Lub poprostu przeladuj bez cachu czyli Ctrl + Shift + R

[Zbłąkany]

Albo wylacz cache