 |
|
 |
|
|
|
|
Subiectul anterior
:: Subiectul urmator |
|
Autor |
Mesaj |
|
Elektro_Love
Administrator
Data inscrierii: 21/Iul/2010
Mesaje: 101
|
 Trimis:
22/07/2010 11:50 Titlul subiectului:
Obiectul image - 1 |
|
|
Folosind JavaScript puteti crea o multime de urmări imaginilor de pe site.
In aceasta lectie si in urmatoarea veti invata sa lucrati cu obiectul image, sa creati consecințe cu susținerea imaginilor, folosid JavaScript.
1. Imaginile in pagina web
In JavaScript toate imaginile sunt reprezentate intr-o matrice numita images. Aceasta este o proprietate (si subobiect) a obiectului "document".
Pentru indexarea in matrice (sau tablou), fiecare fotografie de pe o pagina web are un anumit numar (index). Prima poză are numarul 0, cea de-a doua imagine are numarul 1 si asa mai departe.
Astfel, se poate face referire la prima imagine utilizând expresia "document.images[0]".
Fiecare imagine dintr-un document HTML este considarata un obiect Image.
Un obiect Image are mai numeroase proprietati care pot fi accesate prin JavaScript. De exemplu puteti vedea dimensiunile unei imagini întrebuințând proprietatile "width" si "height".
Urmatorul exemplu returneaza lungimea (in pixeli) a primei imagini din document:
document.image[0].height
Declararea imaginii care apare in pagina web se face cu sintaxa HTML:
<img src="fisier.gif" name="nume_img" id="id_img" />
Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se lucreze cu ele folosind numarul indexului, de aceea se poate atribui fiecarei imagini cate un nume (cu atributul "name").
O alta metoda este utilizarea proprietatii "getElementById("id_element"), unde "id_element" este id-ul imaginii dat cu atributul "id="..."", ca in exemplu urmator:
document.nume_img.height
sau
document.getElementById("id_img").height
Obiectul "image" are o singura metoda:
handleEvent() - reprezinta evenimentul specificat pentru executarea unei anumite actiunie
Proprietatile obiectului image sunt urmatoarele:
Border - poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli
Alt - specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)
Align - unde sa fie plasata imaginea
Complete - poate fi doar citita si este o valoare booleana care îngăduie sa stim daca imaginea a fost descarcata complet.
Height - inaltimea in pixeli a imaginii
Hspace - se refera la spatiul din dreapta si stanga imaginii (in pixeli)
Lowsrc - specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta
Name - se foloseste pentru a da nume unei imagini
Src - specifica URL-ul (adresa si numele) imaginii
usemap - eticheta map
Vspace - spatiul dintre partea de sus si de jos a imaginii
Width - latimea in pixeli a imaginii
2. Incarcarea unei imagini noi
Daca doriti sa schimbati imaginile pe pagina prin JavaScript, se foloseste propprietatea src.
Ca si in eticheta <img>, proprietatea "src" reprezinta adresa imaginii afisate.
Cu JavaScript putem da o noua adresa imaginiii care trebuie incarcate in pagina, astfel imaginea de la noua adresa va inlocui vechea imagine.
Iata un exemplu prin care puteti intelege cum se face aceasta schimbare de imagini:
| Citat: | <img name="imagine" src="img1.jpg" width="155" height="155">
<form>
<input type="button" onClick="document.imagine.src='img2.jpg'" value="Schimba imaginea">
</form> |
- Imaginea "img1.jpg" este incarcata si ia numele "imagine".
- Cu linia de cod "document.imagine.src='img2.jpg' se inlocuieste fosta imagine "img1.jpg" cu o noua imagine "img2.jpg", prin apasarea butonului "Schimba imaginea".
- Imaginea noua va fi afisata in acelasi loc, suprafata de afisare a imaginii ramane aceeasi.
Iata inca un exemplu in care avem o pagina HTML cu doua link-uri (legaturi) care, printr-un script JS altera afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si stocate intr-o variabila tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii: "gonext" si "goback".
| Citat: | <html>
<head>
<title>Titlu</title>
<script type="text/javascript">
<!--
imagini = new Array("img1.jpg","img2.jpg","img3.jpg");
nr = 0;
function goback() {
if (document.images && nr > 0) {
nr--;
document.imgs.src=imagini[nr];
}
}
function gonext() {
if (document.images && nr < (imagini.length - 1)) {
nr++;
document.imgs.src=imagini[nr];
}
}
// -->
</script>
</head>
<body>
<h4 align=center>Imagini<br>
<img src="img/img1.jpg" name="imgs" width="155" height="155"><br>
<a href="javascript:goback()"><<- Precedenta</a> |
<a href="javascript:gonext()">Urmatoarea ->></a>
</h4>
</body>
</html> |
- Un dezavantaj al scripturilor din aceste doua exemple poate fi faptul ca dupa apasarea butonului "Schimba imaginea" sau a link-ului "urmatoarea >>", afisearea imagini noi poate intarzia pentru că aceasta trebuie sa fie incarcata de browser dupa apasarea butonului (sau a link-ului). In lectia urmatoare veti invata cum sa evitati acest lucru prin "preincarcarea imaginilor".
_________________
[url=http://www.fodey.com/generators/animated/ninjatext.asp] [/url] |
|
|
|
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
Tutoriale JavaScript
