Komórka typu "rollOver"

Wszystko o HTML, XHTML, XML, CSS.
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 800x600
Kontakt:

Komórka typu "rollOver"

Postautor: linksworld » 14 paź 2005, 20:53:36

zastanawia mnie, jak zrobione są menu na niektóruch stronach www.
:arrow: na przykład mozilla.org

to znaczy:
:arrow: tekst w komórkach,
:arrow: a po najechaniu na komórkę jej tło się zmienia
Awatar użytkownika
Mati
Posty: 1016
Rejestracja: 20 sie 2005, 14:47:10
Reputacja: 15
Lokalizacja: Olsztyn
Płeć: Mężczyzna
User Agent: Opera Windows

Postautor: Mati » 14 paź 2005, 21:00:38

No ja też jestem ciekaw.
Ostatnio zmieniony 14 paź 2005, 21:03:16 przez Mati, łącznie zmieniany 1 raz.
Awatar użytkownika
Puma
Posty: 147
Rejestracja: 09 paź 2005, 17:33:58
Reputacja: 7
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: Puma » 14 paź 2005, 21:01:03

[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ą.
porni
Posty: 1354
Rejestracja: 08 lip 2005, 18:33:05
Reputacja: 8
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: porni » 14 paź 2005, 22:57:20

Aaaa CSS nie lepszy??

CodeColon Select All Code

<td class="komorka"


i w arkuszu styli

CodeColon Select All Code

.komorka a:link &#123;
backgroundblue;
&
#125;

.komorka a:hover &#123;
backgroundblack;
&
#125;
 
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: linksworld » 15 paź 2005, 15:58:35

Hmm... ciekawy bardzo ten CSS :D , bo JavaScript spotykany jest rzadko w takich momentach :lol: .

Dziwi mnie jeszcze jedna rzecz: :?
:arrow: w komórce jest dajmy na to jedno słowo, a łączem jest cała komórka...


Widziałem jeszcze coś takiego:

CodeColon Select All Code


off
&#123;
background#cośtam
&#125;

off.hover
&#123;
background#inne cośtam
&#125;
 
Awatar użytkownika
Puma
Posty: 147
Rejestracja: 09 paź 2005, 17:33:58
Reputacja: 7
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: Puma » 15 paź 2005, 16:21:45

[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ąć.

CodeColon Select All Code

<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.
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: linksworld » 15 paź 2005, 17:23:43

Puma dostaje ode mnie drugiego plusa :!:
Awatar użytkownika
Farseer
Posty: 519
Rejestracja: 18 sie 2005, 15:41:22
Reputacja: 0
Lokalizacja: Bielsko-Biała
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768
Kontakt:

Postautor: Farseer » 16 paź 2005, 09:44:04

Puma ladnie kopiowac umiesz :)
Since 1990 there have been 93 wars in 70 states all states around the world with 5.5 million people dead.
75% of these people were civilians, 1 milion of them were children!
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: linksworld » 20 paź 2005, 20:12:01

Farseer Ty to jesteś... czasem boję się odpowiadać... Twoja osoba straszy użytkowników... Bez obrazy !!
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
Awatar użytkownika
fuma
Przyjaciel CBA
Posty: 11168
Rejestracja: 01 sie 2005, 14:57:56
Reputacja: 201
Lokalizacja: z jajka niespodzianki :P
Płeć: Mężczyzna
User Agent: Firefox Windows 1024x768

Postautor: fuma » 20 paź 2005, 20:42:45

Już któryś raz z kolei wypowoadzasz się linksworld nie na temat. Proszę o zaprzestanie tego typu praktyk.
Awatar użytkownika
Puma
Posty: 147
Rejestracja: 09 paź 2005, 17:33:58
Reputacja: 7
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: Puma » 21 paź 2005, 10:21:07

W CSS można napisać tak, cała komórka jest jako link :

CodeColon Select All Code

.blok &#123;
displayblock;&#125;


<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
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: linksworld » 21 paź 2005, 18:39:34

Puma, rozumiem, że Ty to rozumiesz, i że rozumiesz to, że ja tego
nie rozumiem, więc powiem, że nie wstawię Ci plusa, bo nie jest to pomocne,
a na dodatek tego nie rozumiem ;)
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
Awatar użytkownika
Puma
Posty: 147
Rejestracja: 09 paź 2005, 17:33:58
Reputacja: 7
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: Puma » 21 paź 2005, 18:59:45

Ha ha, fajnie to powiedziałeś :)

CodeColon Select All Code

<style>
.
blok &#123;
displayblock;&#125;</style> 


Robisz komórkę w tabeli a w niej linka, dodajesz class(styl) przy linku (class="blok").

ps. Możesz naturalnie dać style w oddzielnym pliku a nie w dokumencie ze stroną.
ps2. A plusa nie chcę bo i tak już mówią iż dostałem dwa od ciebie ;)
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

To działa !!!

Postautor: linksworld » 30 paź 2005, 00:16:19

---------- 14:50 23.10.2005 ----------

Sie umie nie ziom :wink: :?: :!:

EngCentre:
Ostatni raz Cie upominam... Fuma juz Ci cos chyba mowil... Jeszcze raz takie cos i nie bede taki mily...


---------- 00:16 30.10.2005 ----------

CodeColon Select All Code

<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


Powyższy kod działa :!: :!: :jupi: :jupi: :jupi:
Dziękować Ci nazwet Indianie ;)
Wykorzystam to...
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
Awatar użytkownika
Puma
Posty: 147
Rejestracja: 09 paź 2005, 17:33:58
Reputacja: 7
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: Puma » 30 paź 2005, 08:23:04

Teraz jeżeli chcesz żeby komórka zmieniała kolor, wystarczy dać link nieaktywny i aktywny na inny kolor gdyż link jest rozciągnięty na całą komórke.

ps. Ja mam tak zrobione :

CodeColon Select All Code

.tabelamenu a:link, .tabelamenu a:visited &#123;
   
text-decorationnone;
   
color#804000;
   
background-colortransparent;
   
displayblock;
&
#125;
.tabelamenu a:hover &#123;
   
color#ffffff;
   
background-color#804000;
   
displayblock;
&
#125; 


Cała tabela ma class tabelamenu, gdybyś nie ograniczył linka do komórki lub stylem to wtedy link by się rozciągnął na całą szerokość strony (display: block; ).

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość