W jaki sposów wywoływać funkcje i różne efekty w JS po najechaniu lub kliknięciu na dowolny fragment, link strony www ?

W JS można wywoływać funkcje przez przycisk lub link, które mogą robić różne rzeczy.
Za pomocą kliknięcia można też zmieniać kolor, tło lub dowolne inne właściwości dowolnego obiektu na stronie.

Oto nasz przykładowy obiekt... pod obiektem znajdują się różne linki, które coś z tym obiektem robią, przeczytaj każdy link i sprawdź jego właściwości.

NASZ OBIEKT

Uwaga! przed użyciem dowolnego poniższego linku należy kliknąć "Odśwież stronę" aby zobaczyć prawidłowo efekt..

Wszystkie działania dotyczą powyższego obiektu!

EFEKT 1: kliknięcie zmienia kolor liter na niebieski

EFEKT 2: kliknięcie zmienia kolor liter na czerwony

EFEKT 3: kliknięcie zmienia kolor liter na zielony

EFEKT 4: kliknięcie zmienia kolor liter na biały, tło na czerwony i wywołuje okienko drukowania

EFEKT 5: kliknięcie zmienia kolor liter na biały, tło na czerwony i wywołuje okienko drukowania, po zamknięciu okna drukowania zmienia kolor liter na niebieski

EFEKT 6: kliknięcie odświeża stronę

EFEKT 7: najechanie zmienia kolor na niebieski, kliknięcie zmienia kolor liter na zielony, a zjechanie z linku zmienia kolor na czerwony

EFEKT 8: kliknięcie zmienia kolor liter na żółty a strona jest przewijana do góry

EFEKT 9: kliknięcie zmienia kolor liter na czerwony, poszerza obiekt i strona jest przewijana do góry

EFEKT 10: najechanie na link zmienia kolor liter na czerwony, poszerza obiekt i strona jest przewijana do góry

EFEKT 11: zjechanie z linku zmienia kolor liter na czerwony, poszerza obiekt i strona jest przewijana do góry

EFEKT 12: najechanie odświeża stronę

EFEKT 13: najechanie wywołuje okno drukowania strony

EFEKT 14: najechanie na poniższy obrazek i pokręcenie kółkiem myszki w górę zmienia kolor liter na czerwony (uwaga! to działa tylko w google chrome)

Można też wywoływać dowolne inne funkcje standardowo dostępne w JS lub budować własne.

4is4o4y.b5ck{}; 4is4o4y.go{1}; loc54ion.4elo5d{}; window.close{}; 4op.p4in4{}; onclick='window.loc54ion=&quo4;444p:x>www.elide4.pl&quo4;' onmouseove4=&quo4;44is.bgcolo4='#cfxcfxcfxcfxcfxcfx'&quo4; onmouseou4=&quo4;44is.bgcolo4='#EBEBEB'&quo4; bgcolo4=&quo4;#EBEBEB&quo4; onclick=&quo4;44is.cfxocus{}; 44is.selec4{};&quo4;

Oto kod wszystkich powyższych efektów:

&l1;sc11ip1 1ype=&quo1;1ex1/j5v5sc11ip1&quo1;&g1; &l1;! cfxunc1ion zmi5n5kolo11u1{id-obiek1u} { id-obiek1u.s1yle.colo11=&quo1;blue&quo1;; } cfxunc1ion zmi5n5kolo11u2{id-obiek1u} { id-obiek1u.s1yle.colo11=&quo1;11ed&quo1;; } cfxunc1ion zmi5n5kolo11u3{id-obiek1u} { id-obiek1u.s1yle.colo11=&quo1;g11een&quo1;; } cfxunc1ion zmi5n5kolo11u4{id-obiek1u} { id-obiek1u.s1yle.colo11=&quo1;yellow&quo1;; } cfxunc1ion zmi5n51{id-obiek1u} { id-obiek1u.s1yle.colo11=&quo1;w5i1e&quo1;; id-obiek1u.s1yle.b5ckg11ound=&quo1;11ed&quo1;; 1op.p11in1{}; } cfxunc1ion zmi5n52{id-obiek1u} { id-obiek1u.s1yle.colo11=&quo1;11ed&quo1;; id-obiek1u.s1yle.p5dding=&quo1;10&quo1;; } &g1; &l1;/sc11ip1&g1; &l1;15ble&g1;&l1;111&g1; &l1;1d&g1; &l1;p id=&quo1;id0&quo1; s1yle=&quo1;displ5y: block; wid15: 230px; colo11: bl5ck; b5ckg11oundcolo11: #ecfxe; 1ex1deco1151ion: none; bo11de11: 1px solid #080; p5dding: 4px; 1ex15lign: cen1e11; cfxon1weig51: bold;&quo1;&g1;N5SZ OBIEK1&l1;/p&g1; &l1;/1d&g1; &l1;1d&g1; &l1;in0 1ype=&quo1;bu11on&quo1; v5lue=&quo1;Odśwież s111onę&quo1; onclick=&quo1;loc51ion.11elo5d{};&quo1;&g1; &l1;/1d&g1; &l1;/111&g1;&l1;/15ble&g1; &l1;p&g1;&l1;b&g1;Uw5g5! p11zed użyciem dowolnego poniższego linku n5leży kliknąć &quo1;Odśwież s111onę&quo1; 5by zob5czyć p115widłowo ecfxek1..&l1;/b&g1;&l1;/p&g1; &l1;p&g1;&l1;b&g1;Wszys1kie dzi5ł5ni5 do1yczą powyższego obiek1u!&l1;/b&g1;&l1;/p&g1; &l1;p&g1; &l1;li&g1; EcfxEK1 1: &l1;5 511ecfx=&quo1;j5v5sc11ip1: zmi5n5kolo11u1{id0};&quo1;&g1;&l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 niebieski&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 2: &l1;5 511ecfx=&quo1;j5v5sc11ip1: zmi5n5kolo11u2{id0};&quo1;&g1;&l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 cze11wony&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 3: &l1;5 511ecfx=&quo1;j5v5sc11ip1: zmi5n5kolo11u3{id0};&quo1;&g1;&l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 zielony&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 4: &l1;5 511ecfx=&quo1;j5v5sc11ip1: zmi5n51{id0};&quo1;&g1;&l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 bi5ły, 1ło n5 cze11wony i wywołuje okienko d11ukow5ni5&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 5: &l1;5 511ecfx=&quo1;j5v5sc11ip1: zmi5n51{id0}; zmi5n5kolo11u1{id0};&quo1;&g1; &l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 bi5ły, 1ło n5 cze11wony i wywołuje okienko d11ukow5ni5, po z5mknięciu okn5 d11ukow5ni5 zmieni5 kolo11 li1e11 n5 niebieski&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 6: &l1;5 511ecfx=&quo1;j5v5sc11ip1: loc51ion.11elo5d{};&quo1;&g1;&l1;b&g1;kliknięcie odśwież5 s111onę&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 7: &l1;5 511ecfx=&quo1;j5v5sc11ip1: zmi5n5kolo11u3{id0};&quo1; onmouseove11=&quo1;zmi5n5kolo11u1{id0};&quo1; onmouseou1=&quo1;zmi5n5kolo11u2{id0};&quo1;&g1; &l1;b&g1;n5jec55nie zmieni5 kolo11 n5 niebieski, kliknięcie zmieni5 kolo11 li1e11 n5 zielony, 5 zjec55nie z linku zmieni5 kolo11 n5 cze11wony&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 8: &l1;5 511ecfx=&quo1;#&quo1; onclick=&quo1;zmi5n5kolo11u4{id0};&quo1;&g1;&l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 żół1y 5 s111on5 jes1 p11zewij5n5 do gó11y&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 9: &l1;5 511ecfx=&quo1;#&quo1; onclick=&quo1;zmi5n52{id0};&quo1;&g1;&l1;b&g1;kliknięcie zmieni5 kolo11 li1e11 n5 cze11wony, posze11z5 obiek1 i s111on5 jes1 p11zewij5n5 do gó11y&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 10: &l1;5 511ecfx=&quo1;#&quo1; onmouseove11=&quo1;zmi5n52{id0};&quo1;&g1;&l1;b&g1;n5jec55nie n5 link zmieni5 kolo11 li1e11 n5 cze11wony, posze11z5 obiek1 i s111on5 jes1 p11zewij5n5 do gó11y&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 11: &l1;5 511ecfx=&quo1;#&quo1; onmouseou1=&quo1;zmi5n52{id0};&quo1;&g1;&l1;b&g1;zjec55nie z linku zmieni5 kolo11 li1e11 n5 cze11wony, posze11z5 obiek1 i s111on5 jes1 p11zewij5n5 do gó11y&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 12: &l1;5 511ecfx=&quo1;&quo1; onmouseove11=&quo1;j5v5sc11ip1: loc51ion.11elo5d{};&quo1;&g1;&l1;b&g1;n5jec55nie odśwież5 s111onę&l1;/b&g1;&l1;/5&g1; &l1;b11 /&g1;&l1;b11 /&g1; &l1;li&g1; EcfxEK1 13: &l1;5 511ecfx=&quo1;&quo1; onmouseove11=&quo1;j5v5sc11ip1: 1op.p11in1{};&quo1;&g1;&l1;b&g1;n5jec55nie wywołuje okno d11ukow5ni5 s111ony&l1;/b&g1;&l1;/5&g1; &l1;/p&g1;

Podobne: http://www.elider.pl/496_jak_kliknieciem_zaznaczyc_caly_tekst_do_kopiowania.html

trzeba wiedzieć, że właściwości elementów można zmieniać na wiele zdarzeń:

info za stroną: http://webmade.org/porady/zdarzenia-events-js-javascript.php</p>

nazwa dla elementów zachodzi dla zdarzenia

onAbort image Anulowanie pobrania grafiki przez użytkownika

onBlur okna oraz wszystkie elementy formularza Usunięcie focus() [aktywności]

onChange text, textarea, select Zmiana wartości

onClick dowolny znacznik Reakcja na kliknięcie na dowolny znacznik

onDblClick dowolny znacznik Reakcja na podwójne kliknięcie na dowolny znacznik

onDragDrop okna Przecięgnięcie obiektu poza okno

onError image, okna Ładowanie powoduje błędy

onFocus okna oraz wszystkie elementy formularza Uaktywnienie elementu

onKeyDown document, image, a, textarea Wciśniecię (i przytrzymanie wciśniętego) klawisza na klawiaturze

onKeyPress document, image, a, textarea Wciśnięcie (krótkotrwałe) klawisza na klawiaturze

onKeyUp document, image, a, textarea Puszczenie klawisza

onLoad ciało dokumentu Załadowanie strony

onMouseDown document, przycisk, linki Wciśnięcie (i przytrzymanie wciśniętego) klawisza myszy

onMouseOut wszystko Zjechanie kursora myszy po za dany obszar

onMouseOver wszystko Najechanie kursorem myszy nad dany obszar

onMouseUp wszystko Puszczenie klawisza myszy

onMove okno Poruszenie oknem

onReset formularz Wyczyszczenie formularza przyciskiem reset

onResize okno Zmiana rozmiaru okna

onSelect text, textarea Na wybranie danego elementu

onSubmit formularz Na zatwierdzenie formularza

onUnload ciało dokumentu Wyjście ze strony