na przykład mozilla.org tekst w komórkach, a po najechaniu na komórkę jej tło się zmienia[JavaScript] Jak zmienić kolor komórki tabeli po najechaniu na nią myszą?
Problem
Chcesz zmienić kolor w jednej z komórek tabeli po najechaniu na nią myszą, po opuszczeniu kursora, stary kolor ma zostać przywrócowny ponownie.
Rozwiązanie
W różnych projektach graficznych lub przy wyróżnianiu aktualnie wybranej komórki menu stworzonego z wykorzystaniem tabel, można zastosować bardzo prosty i efektowny trick - zmienić kolor pola. Zabieg stosowany z wyczuciem znacznie ułatwia nawigację po menu na stronie. Zobacz jak to osiągnąć.
<table border=1><tr>
<td bgcolor="yellow"
onMouseOver='this.style.backgroundColor="red"'
onMouseOut='this.style.backgroundColor="yellow"'>
komórka 1
</td>
<td bgcolor="#c0c0c0"
onMouseOver='this.style.backgroundColor="blue"'
onMouseOut='this.style.backgroundColor="#c0c0c0"'>
komórka 2
</td>
</tr></table>
Jak widzisz w przykładzie, ważne jest ustalenie trzech kolorów - pierwszy (bgcolor) to kolor domyślny komórki, drugi (onMouseOver) uaktywnia się po najechaniu kursorem myszy, a trzeci (onMouseOut) pojawi się po opuszczeniu komórki przez kursor.
Dobierając te trzy kolory można dowolnie modyfikować kolory poszczególnych komórek tabeli. Pamięraj tylko, że kolory muszą być umieszczone w cudzysłowach - inaczej nie zadziałają.
Kod: Zaznacz cały
<td class="komorka"> Kod: Zaznacz cały
.komorka a:link {
background: blue;
}
.komorka a:hover {
background: black;
}
, bo JavaScript spotykany jest rzadko w takich momentach 
.
w komórce jest dajmy na to jedno słowo, a łączem jest cała komórka...Kod: Zaznacz cały
off
{
background: #cośtam
}
off.hover
{
background: #inne cośtam
}
[JavaScript] Jak zrobić, aby cała komórka tabeli odsyłała na inną stronę po jej kliknięciu?
Problem
Chcesz stworzyć odnośnik w postaci całej komórki tabeli, tak aby można było kliknąć w dowolne miejsce komórki co spowoduje przekierowanie na inną stronę.
Rozwiązanie
Często menu budowane jest w postaci kolorowych komórek tabeli, jednak linkiem jest zawsze tylko odnośnik znajdujący się w tej komórce. Użytkownik musi "trafić" w link, co nie zawsze jest wygodne.
Znacznie ciekawszym rozwiązaniem jest kliknięcie w dowolny obszar komórki tabeli, aby od razu przejść do wybranej strony lub podstrony. Zobacz jak to osiągnąć.
Kod: Zaznacz cały
<table width=200 border=1> <tr><td bgcolor=yellow align=center onclick="document.location='http://web.reporter.pl/'" style="cursor:pointer"> <a href="http://web.reporter.pl/">Web</a> </td></tr></table>
Dodanie do definicji komórki skryptu wywoływanego po jej kliknięciu (onclick) powoduje, że przeglądarka pobiera zawartość strony bez czekania na kliknięcie we właściwy odnośnik tekstowy.
Dodatkowy styl cursor:pointer powoduje, że symbol kursora myszy zamienia się w komórce tabeli na symbol rączki, jak w wypadku prawdziwego odnośnika.
Skrypt jest bardzo wygodny w użyciu i nie wymaga od użytkownika precyzyjnego najechania na odnośnik tekstowy, szczególnie gdy jest on krótki.
Kod: Zaznacz cały
.blok {
display: block;}
<TABLE border="1" width="200">
<TR height=18px>
<TD width=194px> <A HREF="http://www.puma.kw.pl" class="blok">Intermania</A> </TD>
</TR>
</TABLE> 
Kod: Zaznacz cały
<style>
.blok {
display: block;}</style> 
Kod: Zaznacz cały
<TABLE border="1" width="200">
<TR height=18px>
<TD width=194px> <A HREF="http://www.puma.kw.pl" class="blok">Intermania</A> </TD>
</TR>
</TABLE> 
Kod: Zaznacz cały
.tabelamenu a:link, .tabelamenu a:visited {
text-decoration: none;
color: #804000;
background-color: transparent;
display: block;
}
.tabelamenu a:hover {
color: #ffffff;
background-color: #804000;
display: block;
}