R8X-VIBE



 
AcasaPortalCautareMembriInregistrareConectare

Distribuiţi | 
 

 Preincarcare efecte onmouseover si onmouseout

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Digitalboy
ADMINISTRATOR
ADMINISTRATOR
avatar

Mesaje : 1394
Data de inscriere : 11/03/2010

MesajSubiect: Preincarcare efecte onmouseover si onmouseout   Mier Noi 10, 2010 4:17 pm

De obicei, funcțiile "onmouseover" și "onmouseout" sunt folosite pentru efecte ce afișază și ascunde elemente din pagină (text, imagini, link, etc.). Codul pentru acționarea acestor efecte fiind adăugat într-un tag HTML, sub forma generală:

- Această metodă are dezavantajul că încarcă și aglomerează codul documentului, mai ales când sunt mai multe elemente în pagină în care trebuie adăugate acele funcții.
O altă metodă, mai eficientă, este scrierea unui script JavaScript care să preâncarce aceste efecte la încărcarea paginii, iar tot codul necesar să fie scris o singură dată, într-un singur loc, în acel script; folosindu-se doar de id-ul tag-urilor la care trebuie aplicate efectele.
În acest tutorial este prezentat exemplul unui astfel de script. Principiul (logica) lui, pe scurt, este următorul:
Se crează o matrice (Array) în care perechea cheie-valoare este formată din id-ul tag-ului care activează efectul, respectiv id-ul celui care va primi efectul.
Se crează o funcție în care va fi parcursă această matrice.
Pentru fiecare "id" din cheie se preia elementul respectiv din document și se aplică "onmouseover" și "onmouseout" elementului al cărui "id" este dat în matrice la valoarea cheii respective.
Ultimul pas este apelarea funcției la încărcarea (sau imediat după încărcarea) paginii.
- Puteți înțelege mai bine studiind exemplul următor (explicațiile necesare sunt în codul script-ului).

Cod:
<!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"
// ( http://www.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>

- Observați că tag-urile HTML nu au nici un cod JavaScript în ele, totul se află într-un singur loc, în script. Acest script poate fi scris într-un fișier .js extern, ceea ce dă avantajul că poate fi adăugat în toate paginile site-ului, iar la eventuale modificări / adăugări va deveni mult mai simplu, și nu mai necesită lucru și în codul paginilor.
Sus In jos
Vezi profilul utilizatorului http://r8x-vibe.forumz.ro
 
Preincarcare efecte onmouseover si onmouseout
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
R8X-VIBE :: Programare :: JAVA-
Mergi direct la: