Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] zmieniany bgcolor innej komórki
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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
Cytat
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łquestionmark.gif
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
Cytat
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
Cytat
Cytat
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 biggrin.gif
Paul
Cytat
document.all

lepiej stosowac
Kod
document.getElementById('jakies_id');
Dominik
Cytat
Cytat
document.all

lepiej stosowac
Kod
document.getElementById('jakies_id');

Troche ten cytat wyrwany z kontekstu, smile.gif 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
Cytat
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 smile.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.