JavaScript - efekt Rollover

Kod:

Kod pliku okienka :

Ewentualne Objaśnienia:

Tutaj mamy kolejne metody, tym razem związane ze zmianami wielkości okna oraz położeniem takiego okna. Nasz plik, który otwiera okno - to już znacie - posiada również łącze, które w zdarzeniu onClick posiada instrukcję zmiany obrazka, który jest umieszczony w okienku. Ten mechanizm już znacie - odnosimy się do etykiety, nazwy (parametr name) elementu IMG. Oczywiście należy podać odpowiednią nazwę okna, do którego się odnosimy w poleceniu window.document.nazwaobrazu.src . Ale to już znacie, zrobiłem to tak dla przykładu :)

Zobaczmy co się dzieje w okienku, mamy nowe funkcje :
- window.resizeTo - zmienia rozmiar okna do rozmiarów podanych jako parametry (szerokość, wysokość)
- window.resizeBy - zmienia rozmiary okna o podane wartości - czyli tutaj zwiększa szerokość o 2px oraz zmniejsza wysokość o 2 piksele (wartość ujemna)
- window.moveTo - przenosi okno (zmienia jego położenie) na wskazaną w parametrach pozycję na ekranie. Parametry to odległość lewej krawędzi okna od lewej krawędzi ekranu, a drugi tam samy tylko górne krawędzie.
No i tutaj mamy kod JS gdzie dokonujemy obliczeń aby móc w kolejnym łączu ustawić okno dokładnie na środku ekranu. Pierw musimy określić szerokość i wysokość ekranu - do tego służą nam nowo poznane 2 metody czyli : window.screen.availWidth oraz window.screen.availHeight. Nasze okno standardowo otwiera się przyjmując rozmiary 300x300 - takie też ustalamy dla odpowiednich zmiennych. No i pozostaje nam obliczyć w jakim miejscu powinna znaleźć się lewa oraz górna krawędź. Robimy to bardzo prosto - szerokość ekranu dzielimy przez dwa oraz odejmujemy od niej połowę szerokości naszego okna. Analogicznie obliczamy położenie górnej krawędzi. Zwróć uwagę na zastosowanie funkcji parseInt w działaniach dzielenia - daje nam to zawsze liczbę całkowitą jako wynik dzielenia, no bo nie chcemy żeby były to jakieś dziwne liczby rzeczywiste. Kiedy już sobie obliczyliśmy odpowiednie odległości wywołujemy w odpowiednim linku metodę window.moveTo z naszymi obliczonymi parametrami.