JavaScript - Obiectul window - 1(Part23)

Ferestrele sunt cele mai importante elemente de interfata in browser, iar JavaScript ofera multe modalitati de a le manipula.

In acesta lectie veti invata despre obiectul window, proprietatile si metodele acestuia, cum sa creati noi ferestre (pop-up) si sa le inchideti.

1. Proprietatile si metodele obiectului window

Un browser (indiferent de nume sau producator) este prezentat intr-o fereastra si tot ceea ce utilizatorul face cu browserul se executa in interiorul acelei ferestre. Toate elementele unei pagini web sunt de asemenea continute in fereastra respectiva.

Obiectul "Window" este considerat obiectul de nivel ierarhic cel mai inalt in ierarhia obiectelor JavaScript pe partea de client si contine toate celelalte obiecte pe partea de client (cu exceptia obiectului "navigator", conceptual diferit, nefiind un element propriu-zis vizual). Dupa cum în practica se poate lucra cu mai multe ferestre deschise simultan, la fel se poate lucra si cu mai multe obiecte "Window" (de fapt cate unul pentru fiecare fereastra).

Obiectul "Window" se creaza automat atunci cand se deschide o noua fereastra de browser.

Atentie sa nu confundati ferestrele distincte de browser cu cadrele (frame-urile), care de asemenea mai sunt numite ferestre (fiind de fapt subferestre ale ferestrei de browser).

Ca si celelalte obiecte si "Window" are o serie de proprietati si metode. Fiind obiectul de nivelul cel mai inalt unele dintre acestea pot fi apelate sau se poate face referire la ele fara a folosi in fata lor expresia "window." (cum e de exemplu metoda "alert()").

Obiectul window are urmatoarele proprietati:

- closed - specifica daca instanta "window" a fost inchisa

- crypto - permite accesul la caracteristicile de criptare din Netscape

- defaultStatus - specifica mesajul prestabilit in bara de stare a ferestrei

- document - mentioneaza toate informatiile despre documentul din aceasta fereastra

- frames - mentioneaza toate informatiile despre cadrele din aceasta fereastra

- history - mentioneaza adresele URL vizitate de utilizator in fereasrtra curenta

- innerHeight - contine inaltimea in pixeli a zonei afisate din fereastra curenta

- innerWidth - contine latimea in pixeli a zonei afisate din fereastra curenta

- length - reprezinta numarul de cadre din fereastra curenta

- location - contine adresa URL curenta incarcata in browser

- locationbar - face referire la bara de locatie a browserului

- locationbar.visible - contine valoarea booleana care indica daca bara de locatie de pe browserul utilizatorului este vizibila

- menubar - face referire la bara de meniuri a browserului

- menubar.visible - contine valoarea booleana care indica daca bara de meniuri de pe browserul utilizatorului este vizibila

- name - contine numele ferestrei

- offscreen-Buffering - contine o valoare booleana care ne permite sa determinam daca vreo actualizare a ferestrei este executata intr-un buffer din afara ecranului

- opener - contine numele ferestrei din care a fost deschisa o fereastra secundara

- outerHeight - contine inaltimea in pixeli a suprafetei din exteriorul ferestrei curente

- outerWidth - contine latimea in pixeli a suprafetei din exteriorul ferestrei curente

- pageXOffset - contine coordonata X a ferestrei curente

- pageYOffset - contine coordonata Y a ferestrei curente

- parent - face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent

- personalbar - mentioneaza informatii despre bara personala a browserului

- personalbar.visible - contine valoarea booleana care indica daca bara personala de pe browserul utilizatorului este vizibila

- screenX - face referire la coordonata X a browserului, din marginea stanga a ferestrei (Netscape)

- screenY - face referire la coordonata Y a browserului din marginea de sus a ferestrei

- scrollbars - face referire la barele de derulare ale browserului

- scrollbars.visible - contine valoarea booleana care indica daca barele de derulare de pe browserul utilizatorului sunt vizibile

- self - face referire la fereastra curenta

- status - face referire la mesajul de pe bara de stare a ferestrei

- statusbar - face referire la bara de stare a browserului

- statusbar.visible - contine valoarea booleana care indica daca bara de stare a browserului utilizatorului este vizibila

- toolbar - face referire la bara de instrumente a browserului

- toolbar.visible - contine valoarea booleana care indica daca bara de instrumente a browserului utilizatorului este vizibila

- top - face referire la fereastra de nivelul cel mai inalt care afiseaza cadrul curent

- window - face referire la fereastra curenta

Obiectul window are urmatoarele metode:

- atob() - decodifica un sir care a fost codificat in baza 64

- alert() - afiseaza o fereastra de avertizare cu un anumit sir de text

- back() - incarca o pagina anterioara vizitata in fereastra curenta

- blur() - dezactiveaza o fereastra

- btob() - codifica un sir in baza 64

- captureEvents() - stabileste ca fereastra sa captureze toate evenimentele de un tip specificat

- clearInterval() - sterge intervalul stabilit cu metoda "setInterval()"

- clearTimeout() - sterge pauza stabilita cu metoda "setTimeout()"

- close() - inchide fereastra

- confirm() - afiseaza o fereastra de confirmare

- crypto.random() - genereaza un sir aleator de date, a carui lungime este specificata de numarul de octeti transferati

- crypto.signText() - intoarce un sir de date codificate care reprezinta un obiect semnat

- disableExternalCapture() - dezactiveaza capturarea unui eveniment extern

- enableExternalCapture() - activeaza capturarea unui eveniment extern pentru paginile incarcate din alte servere

- find() - afiseaza o caseta de dialog "Find" in care utilizatorul poate introduce text pentru cautare in pagina curenta

- focus() - activeaza instanta "window" specificata

- forward() - incarca urmatoarea pagina in locul paginii curente din fereastra

- handleEvent() - apeleaza handlerul pentru evenimentul specificat

- home() - incarca pagina de baza specificata a utilizatorului in locul paginii curente din browser

- moveBy() - deplaseaza fereastra cu valoarea specificata

- moveTo() - deplaseaza fereastra in locatia specificata

- open() - deschide o noua instanta a unei ferestre

- print() - apeleaza caseta de dialog "Print" astfel ca utilizatorul sa poata tipari fereastra curenta

- prompt() - afiseaza o fereastra cu caseta de dialog "prompt"

- releaseEvents() - elibereaza evenimentele capturate de un tip specificat

- resizeBy() - redimensioneaza fereastra cu valoarea specificata

- resizeTo() - redimensioneaza fereastra la valoarea indicata

- routeEvent() - transfera evenimentele de un tip specificat pentru a fi tratate nativ

- scroll() - deruleaza documentul in fereastra pana la o locatie specificata

- scrollBy() - deruleaza documentul in fereastra cu o valoare specificata

- scrollTo() - deruleaza documentul pe latime si inaltime pana la o locatie specificata din fereastra

- setHotKeys() - permite comutarea intre activarea si dezactivarea tastelor de selectare rapida cand nu sunt prezente meniuri

- setInterval() - apeleaza o functie sau evalueaza o expresie la intervale de timp (constand intr-un anumit numar de milisecunde)

- setResizeable() - permite specificarea posibilitatii redimensionarii unei ferestre

- setTimeout() - apeleaza o functie sau evalueaza o expresie dupa un anumit numar de milisecunde

- setZOptions() - permite specificarea asezarii in ordinea Z (tridimensionala) a unei ferestre

- stop() - opreste fereastra curenta sa incarce alt element in ea

2. Crearea ferestrelor pop-up (metoda open)

Folosind JavaScript puteti deschide o noua fereastra in care se incarca o pagina HTML, cu dimensiuni, pozitie si proprietati stabilite de dv.. Aceste ferestre mai sunt numite si ferestre pop-up.

Pentru a crea o astfel de fereastra puteti folosi metoda "open", avand urmatoarea sintaxa:

open("URL", "nume", "proprietati")

            Unde :

- URL - reprezinta adresa documentului care va fi afisat in fereastra (e optional)

- nume - este un sir care specifica numele ferestrei (e optional)

- proprietati - este o lista de proprietati ale ferestrei (dimensiune, pozitionare, si altele). (e optional) Proprietatile trebuie sa fie separate prin virgula si fara spatii intre ele.

Urmatorul script deschide o noua fereastra (numita si pop-up) care are dimensiunile 400x300 pixeli. Fereastra nu are bara de instrumente, bara de stare sau bara de meniu si va fi deschisa la o distanta de 200 pixeli fata de marginea din stanga si 100 pixeli fata de marginea de sus.

<script type="text/javascript">

<!--

function open_window() {

    fereastra=open("pagina.html","numeFereastra", "width=400,height=300,left=200,top=100,status=no,toolbar=no,menubar=no");

}

//-->

</script>

<form>

    <input type="button" value="Deschide fereastra" onclick="open_window()">

</form> - Butonul "Deschide fereastra" apeleaza, la click, functia "open_window()" care prin variabila "fereastra" executa metoda "open()", aceasta va deschide o fereastra noua cu proprietatile adaugate in metoda.

- Observati ca "fereastra" nu este numele ferestrei. Puteti accesa fereastra prin intermediul acestei variabile. Aceasta este o variabila normala care este valabila numai în interiorul unui script. Numele ferestrei (aici "numeFereastra") este un nume unic care poate fi folosit de toate ferestrele browserului.

Adaugand acest cod intr-un document HTML, in browser veti avea un buton ca cel de jos

- Cand apasati pe buton, se va deschide o fereastra pop-up cu proprietatile specificate in metoda "open()".

3. Inchiderea ferestrelor (metoda close)

Pentru inchiderea unei ferestre se foloseste metoda close(). In fereastra pe care dorim sa o inchidem cu aceasta metoda adaugam un element de legatura <a> (link) sau un buton in care adaugam un eveniment "onClick" care executa metoda "close()" (sau "self.close()"), ca in exemplul urmator:

<a href="#" onclick="self.close()">Inchide</a>

sau

<form>

    <input type="button" value="Inchide" onclick="self.close()">

</form> Cele doua elemente de inchidere a ferestrei au fost adaugate in pagina care se deschide cu fereastra pop-up din exemplul anterior.

open() si close() sunt metode ale obiectului "window". Normal am scrie window.open() si window.close(), dar obiectul "window" este o exceptie. Nu trebuie scris cuvantul "window" daca se apeleaza o metoda a unui obiect fereastra (aceasta este valabil numai pentru obiectul window).

JavaScript - Obiectul Form - 1(Part22)

Formularele sunt elemente HTML care dau viata unor pagini statice deoarece asigura o interfata prin care vizitatorii pot interactiona, cu ajutorul controalelor (elemente ale formularului).

Obiectul Form este mijlocul prin care se poate interactiona cu acest element HTML in scripturile JavaScript.

1. Metode si proprietati ale obiectului form

Dupa cum ati invatat in lectiile precedente, obiectele JavaScript au proprietati si metode.

Proprietatile obiectului "Form" sunt urmatoarele:

action - contine atributul "action" din eticheta <form>, specifica adresa URL unde este trimis formularul

elements - matricea care contine toate elementele din <form>

encoding - contine atributul "enctype" din <form>, specifica o codificare MIME a formularului

length - numarul de elemente continute in formular

method - contine atributul "method" din <form>, defineste felul in care formularul este trimis serverului (get sau post)

name - contine atributul "name" al unei etichetei <form>

target - contine atributul "target" al etichetei <form>, specifica fereastra in care serverul ar trebui sa returneze informatiile. Daca nu este specificata, serverul afiseaza rezultatele in fereastra care a expediat formularul.

Obiectul "Form" are urmatoarele metode:

handleEvent() - apeleaza handlerul de eveniment specificat

reset() - readuce elementele formularului la valorile prestabilite

submit() - declanseaza un eveniment "submit" care trimite datele spre programul specificat in atributul "action" al etichetei <form>

2. Trimiterea formularelor spre server

Limbajul JavaScript permite prelucrarea datelor introduse in formular inainte ca acestea sa fie trimise spre procesare la programul (scriptul) de pe server.

Puteti expedia dadele unui formular utilizand una din cele doua modalitati:

1. - Prin apelarea metodei "submit()" a obiectului "Form".

2. - Prin click pe un buton Submit care trimite automat datele din formularul de care apartine.

Multe din proprietatile obiectului "Form" se ocupa de informatiile suplimentare care sunt trimise la server prin intermediul formularului. Aceste proprietati sunt:

- action - specifica adresa URL a programului catre care vor fi trimise datele din formular

Exemplu:

<form name="f1" action="http://www.marplo.net/script.php" method="post">

Pentru formularele care folosesc metoda "post" puteti preciza in atributul "action" ca datele sa fie trimise prin e-mail, folosind urmatoarea sintaxa:

<form name="f2" action="mailto:adresa_de_email" method="post">

- Cand expediati formularul, se va deschide un client de e-mail ce contine, printre altele, si perechile de "nume-valoare" ale elementelor (casetelor) cuprinse in formular.

- enctype - specifica o codificare MIME a formularului, valoarea prestabilita este "application/x-www-form-urlencode".

O metoda de verificare a acestei codificari este urmatoarea:

if(f1.enctype == "application/x-www-form-urlencode") {

    alert("Tipul de codificare e normal");

} Un alt tip de codificare des folosit este "text/plain".

Iata un exemplu:

<form method="post" name="f3" action="mailto:adresa_de_mail" enctype="text/plain">

Va place site-ul? <br>

<input name="alege" type="radio" value="1" checked>Da <br>

<input name="alege" type="radio" value="2">Nu <br>

<input name="alege" type="submit" value="Trimite">

</form> - Proprietatea "enctype="text/plain"" este folosita pentru a trimite text neformatat. Prin aceasta, mailul va fi mai usor de citit, in cadrul mesajului va apare optiunea aleasa. Fara specificarea acestei proprietati mailul va avea ca atasament un fisier cu optiunea aleasa.

- method - defineste modul in care datele formularului sunt expediate. Se poate folosi valoarea "get" sau "post".

Pentru formularele care folosesc metoda "get", in majoriatea site-urilor este disponibil un program CGI de testare, numit "test-cgi" furnizat impreuna cu serverul (locatia fisierului "test-cgi" poate fi diferita, intrebati administratorul serverului). Folositi urmatoarea sintaxa:

<form action="http://nume_site/cgi-bin/test-cgi" method="get">

Veti primi o pagina care va contine, printre altele, si valorile elementelor din formular.

Pentru incepatori, mai putin cunoscatori, si pentru folosirea cu scripturi PHP, este recomandata metoda "post".

Pentru formularele care folosesc metoda "post", in majoriatea site-urilor este disponibil un program CGI de testare, numit "post-query" furnizat impreuna cu serverul (locatia acestuia poate fi diferita, intrebati administratorul serverului). Daca doriti sa verificati ce date trimite formularul, folositi urmatoarea eticheta:

<form action="http://nume_site/cgi-bin/post-query" method="post">

- Cand trimiteti formularul veti primi, printre altele, si perechile de "nume-valoare" corespunzatoare elementelor din formular.

Puteti verifica tipul metodei de trimitere a datelor si cu un script JavaScript, ca in exemplul urmator:

<script type="text/javascript">

<!--

var tip_metoda;

tip_metoda = formular.method;

alert("Tipul metodei pt. acest formular e :" +tip_metoda);

//-->

</script>

Daca doriti sa faceti o verificare a datelor din formular inainte ca acestea sa fi expediate la server, puteti folosi evenimentul "onSubmit". - onSubmit - este folosita pentru a valida formularul inainte de a fi trimis.

Metoda "onSubmit" se introduce in interiorul etichetei <form>, ca in exemplul urmator:

<script type="text/javascript">

<!--

// Verifica daca input OK

function validare() {

    if (inputOK) return true;

    else return false;

}

//-->

</script>

...

<form method="post" name="nume_form" action="script.php" onSubmit="return validare()">

... - Despre validarea datelor dintr-un formular veti putea invata mai multe in lectia urmatoare.- Lectia 21

Obiectul Form - 2

1. Utilizarea metodei focus si select

Cu metodele focus() si select() puteti adauga formulaului anumite efecte grafice si sa selectati casetele dorite.

Puteti defini care element sa atraga atentia la inceput.

Puteti transmite navigatorului sa revina în locul din formular unde au fost introduse datele gresite, astfel browser-ul va pozitiona cursorul în elementul din formular specificat. Acest lucru se poate face printr-un script ca cel din exemplul urmator

<script type="text/javascript">

<!--

function setfocus () {

    document.nume_form.nume_camp.focus();

}

//-->

</script> - Unde "nume_form" este numele formularului specfificat in atributul "name" din eticheta <form> iar "nume_camp" este numele campului din formular unde va fi pozitionat cursorul (specificat in atributul "name" din eticheta campului respecftiv).

Daca doriti sa atrageti atentia sau sa pozitionati cursorul asupra unui anumit element din formular atunci cand pagina este incarcata, adaugati o proprietate "onload" in eticheta <body>, ca in exdemplu urmator :

<body onload="setfocus()">

Iata un al exemplu in care campul dorit dintr-un formular atrage atentia si este si selectat :

<html>

<head>

<title>Titlu</title>

<script type="text/javascript">

<!--

function setfocus () {

    document.form1.camp2.focus();

    document.form1.camp2.select();

}

//-->

</script>

</head>

<body onload="setfocus()">

<form name="form1">

<input type="text" name="camp1" value="un text"> <br>

<input type="text" name="camp2" value="text selectat">

</form>

</body>

</html> - Daca adaugati codul de mai sus intr-un document HTML, cand il veti deschide cu un browser va fi selectat automat textul din campul doi.

2. Validarea si verificarea datelor introduse in formular

De cele mai multe ori folosim formulare pentru ca datele introduse in acestea sa fie trimise inapoi la server pentru procesare sau prin posta electronica catre un cont de email.

Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise, astfel putem usura traficul si in plus ne putem asigura ca s-au transmis date corecte. De exemplu: sa nu se transmita inputuri fara date în ele, sau ca o adresa e-mail sa contina caracterul @.

Pentru a intelege mai bine vom folosi un exemplu ce contine un formular cu 2 elemente text: "nume" si "email" si un buton "Submit" pt. trimiterea datelor. Vizitatorul trebuie sa introduca numele în primul text si adresa de e-mail în al doilea. Pentru verificarea este adaugat un script JavaScript care verifica datele introduse inainte ca acestea sa fie trimise la server.

<html>

<head>

<title>Titlu</title>

<script type="text/javascript">

<!--

function verifica(form) {

  if (form.nume.value == "") {

    alert("Va rog introduceti numele dvs.");

    return false;

  }

  else if (form.email.value == "" || form.email.value.indexOf('@', 0) == -1 || form.email.value.indexOf('.', 0) == -1) {

    alert("Scrieti corect adresa de e-mail !");

    return false;

  }

return true;

}

// -->

</script>

</head>

<body>

<form name="form1" action="test.php" method="post">

Scrieti numele dvs.:<br>

  <input type="text" name="nume"> <br>

Adaugati adresa de e-mail :<br>

  <input type="text" name="email"> <br>

  <input type="submit" name="submit" value="Trimite" onClick="return verifica(this.form)">

</form>

</body>

</html> - Functia "verifica()" este apelata in eticheta butonului submit prin metoda "onClick="return verifica(this.form)"", argumentul "this.form" este transmis catre functie si face referire la elementele din formularul curent. Astfel, cand este apasat butonul "Trimite" se executa imediat functia "verifica()".

Aceasta verifica cu prima instructiune "if" daca elementul "nume" din formular are valoarea nula (adica nu a fost scris nici un caracter), se compara cu "" pentru a verifica daca sirul este gol. Daca valoarea este nula conditia "if" primeste valoarea "adevarata" si se executa, deschide o fereastra Alert si apoi returneaza "false" (astfel datele nu mai sunt trimise). Daca in casuta "nume" este adaugat vreun caracter valoarea acesteia nu mai e nula (sirul nu e gol) si conditia "if(form.nume.value == "")" nu mai este adevarata si se trece la executia urmatoarei linii de cod a functie.

A doua instructiune "else if (form.email.value == "" || form.email.value.indexOf('@', 0) == -1 || form.email.value.indexOf('.', 0) == -1)" este ceva mai complicata, verifica daca valoarea elementului "email" din formular este nula sau (prin operatorul "OR" ||) daca acesta nu contine caracterele '@' sau punct (.); aceasta deoarece orice adresa de e-mail trebuie sa contina cele doua caractere. Daca la verificarea celor trei conditii (valoare nula, lipsa caracterului '@' si lipsa caracterului punct) vreuna din ele este adevarata, instructiunea "else if" se executa si va deschide o fereastra Alert apoi returneaza "false'.

In caz contrar, daca nici una din conditiile instructiunii "if", "else if" nu este adevarata, functia "verifica()" returneaza "true" si datele vor fi trimise la server.

In browser veti avea urmatorul rezultat:

- Puteti introduce orice în formular si apoi apasati butonul "Trimite". De asemenea incercati sa nu introduceti nimic si sa apasati butonul, sau la campul pt. email adaugati o adresa incompleta (fara @ sau(.)). Veti vedea rezultatul acestui script.

Daca introduceti datele corect nu va apare nici un mesaj.

- In exemplul de mai sus puteti folosi in loc de metoda "onClick()" din eticheta butonlui Submit, metoda "onSubmit()", aceasta se adauga direct in eticheta <form>, dupa cum este prezentat mai jos:

<form name="form1" action="test.php" method="post" onSubmit="return verifica(this)">

Rezultatul va fi acelasi.

JavaScript -Obiectul image - 2(Part21)

1. Preincarcarea imaginilor

In lectia precedenta a fost explicat modul de incarcare a unei imagini noi in locul altei imagini folosind JavaScript.

In exemplul prezentat in Lectia 19 la punctul "Incarcarea unei imagini noi", browserul trebuie sa astepte afisare noi imagini pana cand aceasta este incarcata iar in cazul unor imagini mari asteptarea poate dura prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", toate imaginile folosite in pagina vor fi incarcate la deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci cand este executata o comanda de afisare.

Iata un exemplu prin care puteti intelege cum se face aceast lucru:

<script type="text/javascript">

<!--

var hiddenImg = new Image();

hiddenImg.src = "img2.jpg";

//-->

</script>

<img name="imagine" src="img1.jpg" width="155" height="155">

<form>

<input type="button" onclick="document.imagine.src=hiddenImg.src" value="Schimba imaginea">

</form> - In interiorul scriptului, prima linie creaza un nou obiect "Image".

A doua linie defineste adresa imaginii noi care va fi incarcata si reprezentata prin obiectul "hiddenImg". Astfel imaginea "img2.jpg" este incarcata (dar nu afisata) cand este executata aceasta linie de cod (la deschiderea paginii). Imaginea este pastrata in memorie pentru folosire ulterioara, si anume cand este apasat butonul "Schimba imaginea", care prin codul "document.imagine.src=hiddenImg.src" va afisa imaginea "img2.jpg" in locul celei actuale (img1.jpg).

Afisarea se face imediat, fara a mai astepta incarcarea acesteia.

Daca numarul si marimea imaginilor este mare va dura mai mult incarcarea initiala a paginii, de aceea e bine sa aveti in vedere viteza conexiunii pentru a sti ce metoda este mai indicata.

In pagina web exemplul acesta va afisa urmatorul rezultat:

2. Efecte mouse-over (sau rollover)

Cu mouse-over ("MouseOver" si "MouseOut") se pot crea efecte (precum schimbarea unei poze) care apar la simpla trecere cu mouse-ul deasupra unei zone.

Iata un exemplu foarte simplu:

<a href="#"

    onMouseOver="document.Imgs.src='img1.jpg'"

    onMouseOut="document.Imgs.src='img2.jpg'">

<img src="img3.jpg" name="Imgs" width="155" height="155" border="0"></a> - Dupa cum observati, "onMouseOver" si "onMouseOut" au fost adaugate in interiorul etichetei <a>, e gresit daca le adaugati in eticheta <img>. Imaginile nu pot reactiona la evenimentele "MouseOver" si "MouseOut", trebuie sa punem o eticheta de legatura (link) langa imagini.

Acest exemplu va afisa in browser urmatorul rezultat:

- Initial este afisata imaginea "img3.jpg", cand pozitionati mouse-ul deasupra imaginii va fi afisata "img1.jpg" iar dupa ce departati mouse-ul, va apare imaginea "img2.jpg".

Daca doriti ca efectul de schimbare a imaginii sa apara cand pozitionati mouse-ul pe un link si nu pe imagine, puteti modifica exemplul astfel (<img> va fi adaugat in afara etichetei "<a>...</a>"):

<a href="#"

    onMouseOver="document.Imgs.src='img1.jpg'"

    onMouseOut="document.Imgs.src='img2.jpg'">Legatura</a><br>

<img src="img3.jpg" name="Imgs" width="155" height="155" border="0"> - Acest exemplu este mai mult de studiu pentru a intelege procedeul de utilizare a efectelor "mouse-over". Nu este potrivit pentru adaugarea intr-o pagina web profesionala deoarece cauzeaza unele probleme:

•Imaginile "img1.jpg" si "img2.jpg" nu au fost preincarcate si astfel apar intarzieri in afisarea lor.

•Daca vom folosi mai multe seturi de imagini trebuie scris codul JavaScripty pentru fiecare separat.

•Pentru folosirea modelului si in alte pagini, poate necesita modificari substantiale.

Iata un script complet care evita problemele de mai sus, desi este mai lung, o data scris poate fi folosit cu usurinta si pt. alte pagini web si cu un numar mai mare de imagini.

<html>

<head>

<script type="text/javascript">

<!--

// Daca browserul suporta JavaScript

// Creaza matricea care va stoca imaginile, in variabila pics

  browserOK = true;

  var pics = new Array();

// -->

</script>

<script type="text/javascript">

<!--

  var objCount = 0;           // numarul imaginilor care se modifica in pagina web

// Functia pentru preancarcarea imaginilor, le introduce intr-o matrice

  function preload(name, first, second) {

  if (browserOK) {

    pics[objCount] = new Array(3);

    pics[objCount][0] = new Image();

    pics[objCount][0].src = first;

    pics[objCount][1] = new Image();

    pics[objCount][1].src = second;

    pics[objCount][2] = name;

    objCount++;

  }

}

function on(name) {

  if (browserOK) {

    for (i = 0; i < objCount; i++) {

      if (document.images[pics[i][2]] != null)

      if (name != pics[i][2]) {

        document.images[pics[i][2]].src = pics[i][0].src;

      } else {

      // afiseaza cea de-a doua imagine la pozitionarea cursorului deasupra acesteia

        document.images[pics[i][2]].src = pics[i][1].src;

      }

    }

  }

}

function off() {

  if (browserOK) {

    for (i = 0; i < objCount; i++) {

    // trimite in spate toate imaginile

      if (document.images[pics[i][2]] != null)

        document.images[pics[i][2]].src = pics[i][0].src;

    }

  }

}

// preancarca imaginile - trebuie sa specificati care imagini trebuie preancarcate

// si carui obiect Image apartin. Schimbati aceasta parte daca folositi imagini diferite sau daca adaugati mai multe

// (s-ar putea sa fie nevoie sa schimbati si in corpul documentului (body).

preload("link1", "img1.jpg", "img1t.jpg");

preload("link2", "img2.jpg", "img2t.jpg");

preload("link3", "img3.jpg", "img3t.jpg");

// -->

</script>

</head>

<body>

<a href="adresa1.htmll" onMouseOver="on('link1')" onMouseOut="off()">

  <img name="link1" src="link1.gif" width="100" height="100" border="0"></a> &nbsp;

<a href="adresa2.html" onMouseOver="on('link2')" onMouseOut="off()">

  <img name="link2" src="link2.gif" width="100" height="100" border="0"></a> &nbsp;

<a href="adresa2.html" onMouseOver="on('link3')" onMouseOut="off()">

  <img name="link3" src="link3.gif" width="100" height="100" border="0"></a>

</body>

</html> Acest exemplu foloseste 3 imagini (respectiv 3 link-uri in BODY), dar puteti adauga si 100.

Scriptul pune toate imaginile intr-o matrice "pics" a carei elemente sunt construite de functia "preload()", care este apelata la inceput.

Apelul functiei "preload()" se face in felul urmator: "preload("link1", "img1.jpg", "img1t.jpg");", ceea ce inseamna ca scriptul trebuie sa incarce doua imagini "img1.jpg" si "img1t.jpg" pentru "link1". Prima imagine este imaginea care va fi afisata cand cursorul mouse-ului este în exteriorul imaginii. Iar atunci cand cursorul este pozitionat deasupra imaginii, va fi afisata cea de-a doua imagine. Cu primul argument "name" ("link1") al functiei "preload()" specificam carui obiect Image de pe pagina web apartin imaginile. In corpul ( <body> ) al exemplului veti gasi o imagine cu numele "link1".

Cele doua functii "on()" si "off()" sunt apelate prin evenimentele "onMouseOver" si "onMouseOut". Puteti observa ca functia "on()" trimite in spate toate celelalte imagini afisate initial (care sunt adaugate direct in eticheta <img>). Aceasta este necesar deoarece se poate intampla ca mai multe imagini sa fie afisate accentuat (de exemplu, evenimentul "MouseOut" nu are loc atunci cand utilizatorul muta cursorul de deasupra imaginii direct în afara ferestrei).

Incercati sa testati si sa studiati acest script, astfel veti intelegeti modul lui de functionare.