De obicei, functiile "onmouseover" si "onmouseout" sunt folosite pentru efecte ce afisaza si ascunde elemente din pagina (text, imagini, link, etc.). Codul pentru actionarea acestor efecte fiind adaugat intr-un tag HTML, sub forma generala:

- Aceasta metoda are dezavantajul ca incarca si aglomereaza codul documentului, mai ales cand sunt mai multe elemente in pagina in care trebuie adaugate acele functii.

O alta metoda, mai eficienta, este scrierea unui script JavaScript care sa preincarce aceste efecte la incarcarea paginii, iar tot codul necesar sa fie scris o singura data, intr-un singur loc, in acel script; folosindu-se doar de id-ul tag-urilor la care trebuie aplicate efectele.
In acest tutorial este prezentat exemplu unui astfel de script. Principiul (logica) lui, pe scurt, este urmatorul:
  1. Se creaza o matrice (Array) in care perechea cheie-valoare este formata din id-ul tag-ului care activeaza efectul, respectiv id-ul celui care va primi efectul.
  2. Se creaza o functie in care va fi parcursa aceasta matrice.
  3. Pentru fiecare "id" din cheie se preia elementul respectiv din document si se aplica "onmouseover" si "onmouseout" elementului al carui "id" este dat in matrice la valoarea cheii respective.
  4. Ultimul pas este apelarea functiei la incarcarea (sau imediat dupa incarcarea) paginii.
- Puteti intelege mai bine studiind exemplul urmator (explicatiile necesare sunt in codul script-ului).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Exemplu onmouseover onmouseout</title>

<script type="text/javascript">
// Preincarcarea efectelor "onmouseover", "onmouseout" ( https://marplo.net/javascript )

// Se defineste si creaza un Array pt. perechile de id-uri ale elementelor care vor actiona si primi efectele
// Cheia reprezinta id-ul tag-ului care va actiona efectul, valoare ei este id-ul celui care va primi efectul
var ar_iduri = new Array();
  ar_iduri['a1'] = 'p1';
  ar_iduri['a2'] = 'p2';
  //... similar pot fi adaugate si alte perechi de valori (id-uri)

// Se creaza o variabila cu functia ce va preincarca efectele
var over_out = function () {
    // Se parcurge matricea "ar_iduri" (variabila "i" va reprezenta cheia)
    for(var i in ar_iduri) {
        // Se verifica daca elementele date de id-urile parcurse exista in pagina (pt. a evita erorile)
        if(document.getElementById(i) && document.getElementById(ar_iduri[i])) {
            // Se aplica efectul "onmouseover", dupa formula ( element_ce_activeaza.onmouseover = element_ce_primeste.efect )
            document.getElementById(i).onmouseover = function() {
                // Preia id-ul elementului curent actionat (la care e pozitionat mouse-ul)
                // Pe baza lui va prelua si id-ul din matrice (valoarea) corespunzator lui, care va primi efectul
                var id_ef = this.id;
                document.getElementById(ar_iduri[id_ef]).style.display = 'inline';
            };

            // Se aplica si efectul "onmouseout", dupa formula ( element_ce_activeaza.onmouseout = element_ce_primeste.efect )
            document.getElementById(i).onmouseout = function() {
                // Preia id-ul elementului curent actionat
                // Pe baza lui va prelua si id-ul din matrice (valoarea) corespunzator lui, care va primi efectul
                var id_ef = this.id;
                document.getElementById(ar_iduri[id_ef]).style.display = 'none';
            };
        }
    }
};

// Se determina executarea functiei din variabila "over_out" la 5 miimi de secunda dupa incarcarea paginii
setTimeout("over_out()", 5);

</script>

<style type="text/css"><!--
#p1, #p2 { display:none; }
//--></style>
</head>
<body>

<a href="#" id="a1">Link 1</a> <span id="p1">Descriere Link 1</span><br />
<a href="#" id="a2">Link 2</a> <span id="p2">Descriere pt. Link 2</span>

</body>
</html>
- Observati ca tag-urile HTML nu au nici un cod JavaScript in ele, totul se afla intr-un singur loc, in script. Acest script poate fi scris intr-un fisier .js extern, ceea ce da avantajul ca poate fi adaugat in toate paginile site-ului, iar la eventuale modifivari /adaugari va deveni mult mai simplu, si nu mai necesita lucru si in codul paginilor.
- Acest exemplu va afisa urmatorul rezultat:
Link 1
Link 2

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Preincarcare efecte onmouseover - onmouseout

Last accessed pages

  1. Ser si Estar 4 (1018)
  2. Definire Variabile si Constante (1429)
  3. MouseEvent - Evenimente pentru Mouse (112)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (40314)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (39356)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1983)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1682)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1585)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1446)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1171)