6. Lucrul cu imagini

Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink

Imaginile din paginile web sunt de obicei de doua tipuri: GIF (Graphic Interchange Format) si JPEG (Joint Photographics Experts Group).

• Imaginile GIF sunt recomandate pentru linii, texte si desene simple (ele avand maxim 256 de culori) si pentru realizarea de imagini cu fundal transparent. De asemenea, exista GIF-uri animate, compuse din mai multe imagini statice (cadre) care se succed una dupa alta.

• Imaginile JPEG sunt mai complexe decat cele de tip GIF si ocupa mai putina memorie, fiind comprimate. Ele se folosesc de obicei ca fotografii digitale de inalta calitate, putand fi descarcate de utilizatori din pagina respectiva.

Pentru crearea imaginilor de tip GIF, JPG, BMP, TIFF sau PNG putem folosi programul Paint din Windows XP. Alte programe grafice: Paint Shop Pro, ACDSee, IrfanView, Microsoft GIF Animator, etc.

Nu se recomanda incarcarea exagerata a paginii cu imagini, sunete si animatie, deoarece creste timpul necesar incarcarii paginii (o astfel de pagina este numita plastic „jpig” („jporc”)). De asemenea, imaginile BMP (Bitmap) nu se folosesc in paginile web, fiind foarte mari (la aceeasi imagine, de 20-30 ori mai mari decat cele JPG).

6. 1. Inserarea unei imagini in pagina

Imaginile se insereaza in pagina cu ajutorul etichetei <img>, cu urmatoarea sintaxa:

<IMG SRC=” numefisier ” WIDTH=” x ” HEIGHT=” y ” ALIGN=” aliniere ” ALT=” text alternativ ” HSPACE=” h ” VSPACE=” v ”>, unde:

• Numefisier este numele fisierului imagine, precedat eventual de calea catre acesta. Se recomanda ca imaginea sa fie in acelasi director cu pagina, caz in care precizam doar numele fisierului imagine.

• x si y sunt latimea si inaltimea imaginii, in pixeli (picture elements). In functie de dimensiunile precizate, imaginea poate apare marita, micsorata sau deformata. In loc de „x”, mai putem preciza, procentual, cat la suta din latimea paginii sa ocupe imaginea. De exemplu, WIDTH=70% inseamna ca latimea imaginii va fi 70% din latimea ferestrei browserului.

• Aliniere precizeaza cum sa fie aliniat textul fata de imagine, putand avea urmatoarele valori:

• Top, Middle, Bottom – alinierea textului cu partea de sus (respectiv mijlocul, partea de jos) a imaginii

• Left, Right – imaginea apare in stanga respectiv in dreapta paginii, fiind incadrata de text

• Text alternativ este textul care apare in locul imaginii, daca aceasta nu este disponibila. De asemenea, Internet Explorer si alte browsere afiseaza acest text intr-un bilet explicativ (hint) cand vizitatorul plaseaza mouse-ul peste imagine.

• h si v reprezinta distanta dintre imagine si text, deasupra-dedesubt respectiv la stanga-dreapta, exprimata in pixeli.

6. 2. Diverse utilizari ale imaginilor

• ca linie - in loc de <HR> folosim eticheta <IMG> - de exemplu <IMG SRC=”linie.jpg” WIDTH=90%>.

<dl>
<dd><img src="trifoi.gif">Actiune</dd>
<dd><img src="trifoi.gif">Repaus</dd>
</dl>

• ca fundal pentru pagina, creat prin alaturarea imaginii (tile). Se foloseste eticheta <BODY>, astfel: <BODY BACKGROUND=” numefisier ”>, unde numefisier este numele fisierului imagine dorit. Daca dorim ca pagina sa aiba o culoare de fundal, folosim eticheta BODY sub forma: <BODY BGCOLOR=”#rrggbb”> sau <BODY BGCOLOR=”culoare”>.

6. 3. Crearea si folosirea imaginilor de tip GIF

Pentru a crea imagini GIF statice, se poate folosi Paint din Windows XP. Pentru imagini GIF mai complexe (ex: animate si/sau cu efecte de transparenta), vom folosi programul freeware Microsoft GIF Animator.

6. 3. 1. Efecte de transparenta

A. IMAGINILE GIF TRANSPARENTE sunt invizibile in pagina, rolul lor fiind de a ajuta la pozitionarea exacta a altor elemente in pagina.

1. Deschidem Paint si accesam meniul Image – Attributes, apoi stabilim width si height egale cu 1. Apasam OK.

2. Copiem imaginea obtinuta (Edit – Select All, Edit – Copy, sau CTRL+A, CTRL+C).

4. La tab – ul Image, bifam „Transparency”, apoi clic pe patratul colorat de la „Transparent Color” si alegem culoarea care trebuie sa fie transparenta (aici, albul), din paleta aparuta.

Acum, daca dorim pozitionarea textului „Bine ati venit” la exact 50 de puncte fata de marginea stanga a paginii, folosim GIF–ul transparent „spacer.gif”, specificand latimea acestuia (width) de 50 de puncte si inaltimea (height) de 1 pixel:

<html><head><title>Folosire GIF transparent</title>
<img src="spacer.gif" height="1" width="50">
Bine ati venit</html>

B. ZONA TRANSPARENTA dintr–un GIF permite sa vedem ce este in spatele imaginii (ex.: fundalul paginii) – ca in exemplul de mai jos:

Pentru ca o zona din imagine sa fie transparenta, este necesar sa aiba aceeasi culoare. Urmeaza sa stabilim acea culoare ca fiind transparenta, la fel ca la pasul 4 de mai sus.

6. 3. 2. GIF-uri animate

Vom exemplifica in continuare, crearea unui GIF animat reprezentand un semafor, folosind Microsoft GIF Animator.

1. Deschidem Paint si micsoram suprafata de lucru la cat avem nevoie, apoi desenam semaforul (cu rosul aprins).

5. Repetam pasii 3 – 4 de cate ori este necesar, obtinand in final cadrele care compun animatia.

6. OPTIONAL: daca ordinea cadrelor nu este cea dorita, selectam un cadru si ii modificam pozitia cu ajutorul butoanelor . Pentru duplicarea unui anumit cadru (ex.: cel cu galbenul aprins), il selectam si apasam Copy , apoi Paste .

7. La tab–ul Animation, bifam casetele Looping (Repetare) si Repeat forever (Repetare încontinuu).

8. La tab–ul Image, selectam toate cadrele din animatie apasand butonul

, apoi stabilim durata unui cadru in caseta Duration.

6. 4. Legaturi pe o imagine. Harti de imagini

Crearea unei legaturi pe o imagine

Pentru a face ca o imagine sa devina hiperlegatura, tot ce avem de facut este sa includem eticheta <IMG> – prin care precizam ce imagine sa fie afisata – in interiorul etichetei <A>.

In exemplul urmator, imaginea « casa_mica.jpg » apare in pagina ca hiperlegatura catre imaginea « casa.jpg », fiind o versiune in miniatura a acesteia. La clic pe aceasta miniatura, se deschide imaginea « casa.jpg ». Ambele imagini sunt in acelasi director cu pagina:

Maparea unei imagini

O harta de imagini (image map) este o imagine ce contine zone predefinite numite puncte fierbinti (hot spots) cu rol de hyperlink. De exemplu, facând clic pe un hotel din harta unei statiuni, se deschide o pagina web cu informatii despre acest hotel. Pentru crearea unei harti de imagini, procedam astfel:

1. Încarcam imaginea dorita într-un editor grafic (ex. Paint) si miscând mouse-ul deasupra imaginii, notam coordonatele punctelor care vor încadra hot-spot-ul. Aceste coordonate in pixeli sunt de forma (x, y), unde x reprezinta coloana, iar y linia, sistemul de coordonate fiind relativ la coltul stânga-sus al imaginii.

De exemplu, imaginea alaturata reprezinta statiunea Venus, iar hot spot-ul dreptunghiular, hotelul “Vulturul”. Coordonatele colturilor stânga-sus si dreapta-jos ale hot spot-ului sunt (97, 97) si (129, 144).

2. Introducem in codul HTML al paginii, eticheta <MAP>, care creaza harta de imagini si defineste hot spot-ul.Aceasta are sintaxa:

• URL folosit este calea catre fisierul folosit (ex: o pagina web cu informatii despre hotelul respectiv), sau URL-ul acestuia.

• Forma hot spot este una din urmatoarele: RECT (dreptunghi), CIRCLE (cerc) si POLY (poligon).

• Coordonate este o lista de numere ce defineste dimensiunile hot spot-ului. În functie de forma acestuia, lista contine:

• pentru RECT, perechile de coordonate ale colturilor stânga-sus si dreapta jos ale dreptunghiului.

• Text alternativ este textul care apare cand punem mouse-ul deasupra hot-spot-ului

3. Introducem in codul HTML al paginii, eticheta <IMG>, prin care precizam imaginea folosita si faptul ca aceasta contine o harta de imagini, conform sintaxei:

unde imaginea venus.jpg si fisierul vulturul.html , sunt în acelasi director cu pagina.

@ Daca harta de imagini are mai multe hot spot-uri, tag-ul <AREA> se repeta în <MAP> pentru fiecare din acestea.

Incercati:

1. Inserati in pagina web un GIF animat care afiseaza numele vostru litera cu litera. Fundalul animatiei va fi transparent.

2. Desenati cu programul grafic preferat, un buton cu aspect deosebit si inserati imaginea in pagina web. Cand mouse-ul este deasupra butonului, sa apara un text explicativ, iar la apasarea lui sa se deschida un fisier ales de dvs. (ex : o imagine, o pagina web, etc.).

3. Realizati o harta de imagini cu magazinele de pe strada dvs., reprezentate ca hot spot-uri. Pentru fiecare magazin sa apara numele ca text alternativ, cand mouse-ul este deasupra. La clic pe un magazin, sa se deschida o pagina cu informatii despre acesta (profil, produse oferite, preturi, comentarii, etc.).