Pagina Web Javascript

Cuprins
Capitolul 1. Introducere.....................................................................5
1.1. Generaliti.......................................................................................................................5
1.2. Scopul i utilitatea proiectului.........................................................................................5
Capitolul 2. Tehnologii folosite pentru realizarea site-urilor WEB........................7
2.1. HTML 5...........................................................................................................................7
2.2. CSS 3...............................................................................................................................8
2.2.1. Generaliti despre CSS............................................................................................9
2.2.2. Stiluri interne (in-line)..............................................................................................9
2.2.3. Foi de stil n pagin.................................................................................................10
2.2.4.Foi de stil externe.....................................................................................................11
2.2.5. Stiluri pentru diferii selectori.................................................................................11
2.2.6. Pseudo-clase............................................................................................................12
2.2.7. Pseudo-clase Legturi..........................................................................................12
2.2.8. Elementele DIV i SPAN........................................................................................13
2.3. JavaScript.......................................................................................................................13
2.3.1. Generaliti..............................................................................................................13
2.3.2. JavaScript Limbaj de scriptare.............................................................................14
2.3.4. JavaScript Interpretor...........................................................................................15
2.3.5. JavaScript Limbaj orientat pe obiect....................................................................15
2.3.6. Metode....................................................................................................................16
2.4. jQuery............................................................................................................................16
2.4.1. Elemente de baza....................................................................................................16
2.4.2. Includere jQuery.....................................................................................................17
2.4.3. Selectare elemente HTML in jQuery......................................................................17
2.4. Ajax................................................................................................................................19
2.4.1. Generaliti..............................................................................................................19
2.4.2. Avantaje ale tehnologiei Ajax.................................................................................21
2.4.3. Dezavantaje ale tehnologiei Ajax............................................................................22
Capitolul 3. Realizarea practic a site-ului...............................................23
3.1. Structura site-ului...........................................................................................................23
3.1.1. Generaliti..............................................................................................................23
3.1.2. Structura site-ului Obiective turistice ale Judetului Hunedoara..........................24
3.2. Componentele site-ului Obiective turistice ale Judetului Hunedoara i modul lor de
funcionare............................................................................................................................27
3.2.1. Pagina index.html....................................................................................................27
3.2.2. Paginile .html care afieaz galeriile foto...............................................................31
3.2.3. Paginile .html care conin informaiile afiate n ferestrele pop-up........................32
3.2.4. Fiierul hartainteractiv.css...................................................................................34
3.2.5. Fiierul galerie.css..................................................................................................36
3.2.6. Scriptul setup.js.......................................................................................................37
3.2.7. Scriptul zoommap.js................................................................................................40
3.3. Concluzii........................................................................................................................44
4. ANEXE................................................................................... 45
3
Anexa 1 - Scriptul setup.js..............................................................................................45
Anexa 2 - Scriptul zoommap.js.....................................................................................47
Anexa 3 - Fiierul hartainteractiva.css.......................................................................50
Anexa 4 - Fiierul galerie.css.........................................................................................51
Anexa 5 - Pagina index.html..........................................................................................52
Anexa 6 - Pagina harta_generala.html......................................................................53
Anexa 7 - Pagina deva.html...........................................................................................55
Anexa 8 - Pagina hunedoara.html...............................................................................56
Anexa 9 - Pagina cetate_deva.html............................................................................56
Anexa 10 - Pagina castel_hunedoara.html...............................................................57
Anexa 11 - Pagina gen2.html.........................................................................................58
Anexa 12 - Pagina dv2-1.html.......................................................................................59
Anexa 13 - Pagina dv2-2.html.......................................................................................60
Anexa 14 - Pagina hd1-2.html.......................................................................................62
4
Capitolul 1. Introducere
1.1. Generaliti
World Wide Web-ul reprezint un sistem de distribuie local sau
global a informaiilor hipermedia. Din punct de vedere tehnic, spaiul
WEB pune la dispoziie un sistem global i standardizat de comunicare
multimedia, informaiile fiind organizate asociativ i distribuite n funcie
de cererile utilizatorilor, funcionnd conform modelului client/server. Web-
ul, cu toat dezvoltarea lui spectaculoas, nu trebuie confundat cu
Internetul, ci poate fi vzut drept cel mai efervescent i dinamic serviciu al
acestuia, neputnd exista fr infrastructura hardware a reelelor
mondiale interconectate.
Spaiul WWW a fost creat la CERN ( Centrul European de Cercetri
Nucleare de la Geneva) n anul 1989 de ctre fizicianul Tim Berners-Lee i
echipa sa, cu scopul de a avea acces mai uor la informaiile tehnice ale
manualelor de utilizare a calculatoarelor. Data de 12 noiembrie 1990 se
consider a fi ziua de natere oficial a WEB-ului. Primul client grafic
permind vizualizarea de documente WWW a purtat denumirea World
Wide Web. Dezvoltarea ulterioar a sistemului a fost facilitat de
navigatorul grafic Mosaic, rulnd sub mediul Xwindow. Acest navigator era
foarte simplu de folosit si poseda faciliti multimedia, fiind furnizat gratuit
pe Internet ncepnd din 1993.
Ca orice serviciu bazat pe modelul client/server, Web-ul const dintr-
o pleiad de servere Web. Cele mai cunoscute sunt Apache, Netscape
Enterprise Server, Sun Web Server, Microsoft Internet Information Server,
Stronghold, Jigsaw. Calculatorul pe care ruleaz un server Web i care
gzduiete o serie de pagini WWW se mai numete i sit (site).
Documentele (paginile) Web vor fi vizualizate de utilizatori prin intermediul
navigatoarelor Web (denumite i browsere sau ageni-utilizator), care
reprezint de fapt clieni solicitnd resurse hipertext serverelor Web.
Dintre cele mai populare navigatoare actuale pot fi amintite Netscape
Navigator, Internet Explorer sau Opera (toate opernd n mod grafic), ori
Lynx sau Links (rulnd n mod text).
1.2. Scopul i utilitatea proiectului

Atractiile reprezinta unii dintre principalii factori motivanti ai unor deplasari n scopuri
turistice, iar, adesea, pot fi considerate chiar ca fond esenta produsului turistic. n absenta
atractiilor nu ar mai fi necesare serviciile turistice. Altfel spus, turismul, ca atare, nu ar
putea exista n lipsa atractiilor. O atractie turistica (sau pentru vizitatori) este o trasatura
distincta a unei zone, care poate fi un loc de desfasurare a unor activitati ori un centru.
5
Exista o mare diversitate a atractiilor. n termeni generali, acestea tind sa
fie unitati singulare, locuri sau zone geografice la scara mica, n mod clar definite
care sunt accesibile si motiveaza un numar mare de persoane sa se deplaseze de
la domiciliul lor, pentru a le vizita, n timpul lor liber, pentru o perioada scurta,
limitata. Cele mai importante atractii naturale pot fi considerate plajele, pesterile,
rurile si lacurile, marile si oceanele, unele stnci si vrfuri ale muntilor, dar si
elemente ale florei si faunei. Dintre atractiile facute de om, fara a fi proiectate cu
scopul primordial de a atrage vizitatori pot fi enumerate:bisericile, manastirile,
catedralele, siturile arheologice, monumente istorice, case nationalizate, lacuri de
acumulare etc.
Termenul de atractie turistica este, de fapt, impropriu, avnd n vedere
ca majoritatea vizitatorilor pentru aceste atractii nu sunt turisti, n sensul
acceptat al definitiei acestora, ei fiind, adesea, doar vizitatori de o zi si nu
vizitatori cazati, cel putin pentru o noapte sau sunt chiar locuitori ai localitatii
unde se afla atractia. De aceea, mai corect ar fi sa vorbim despre atractii pentru
vizitatori, dect atractii turistice. Ne intereseaza, nsa, n mod deosebit, acele
atractii care sunt vizitate de un numar ct mai mare de turisti, ce pot sa aduca
venituri importante zonei n care sunt amplasate .
Aceasta lucrare prezinta o modalitate de creare a unui site cu obiectivele turistice din
judetul Hunedoara,cu miljloace relativ simple si costuri nule,care,desi in acest caz specific
prezinta si harti,contacte,descriere ale atractiilor turistice.Acest site poate sa fie folosit in
orice domeniu prin utilizarea unor informatii si imagini specifice legate de dorirea noului site
prin modificare unor setari simple si implementarea lor.
6
Capitolul 2. Tehnologii folosite pentru realizarea site-
urilor WEB
2.1. HTML 5
HTML 5 este un limbaj pentru structurarea i prezentarea
coninutului pentru World Wide Web, o tehnologie nucleu pentru Internet
propus iniial pentru software-ul Opera. Este a cincea revizuire a
standardului HTML (creat n 1990 i standardizat ca HTML4 din 1997) i
din octombrie 2011 este n curs de dezvoltare. Obiectivele sale principale
au fost acelea de a mbunti limbajul cu un suport pentru cele mai
recente apariii multimedia n acelai timp meninndu-l uor de citit de
oameni i bine neles de computere i device-uri (browsere WEB, parsere,
etc.). HTML5 i propune s nsumeze nu numai HTML4, dar i XHTML1 i
DOM2HTML (ndeosebi JavaScript).
Urmrind predecesorii si imediai HTML 4.01 i XHTML 1.1, HTML5
este un rspuns la observaia c HTML i XHTML utilizate n comun pe
World Wide Web sunt un amestec de caracteristici introduse de specificaii
diferite, mpreuna cu acestea mai sunt i caracteristicile diferite aduse de
software, de browsere, i multe erori de sintax n documentele WEB
existente. Astfel, HTML5 devine o ncercare de a defini un singur limbaj de
marcare (markup language) care poate fi scris n oricare dintre sintaxele
HTML sau/i XHTML. Acesta include modele detaliate de prelucrare pentru
a ncuraja mai multe implementri interoperabile; extinde, mbuntete
i raionalizeaz disponibilitile pentru documentele WEB i introduce
marcarea i aplicaii API (application programming interfaces) pentru
aplicaii WEB complexe. Din aceste motive, HTML5 este un posibil candidat
pentru aplicaiile de platforme mobile. Multe caracteristici ale HTML5 au
fost create din considerarea ca va trebui sa devin capabil s ruleze pe
dispozitive cum ar fi smart-phone-urile sau tabletele.
n special, HTML5 aduce multe noi caracteristici sintactice. Acestea
cuprind elemente ca <video>, <audio>, <header> i <canvas> elemente
HTML, precum i integrarea coninutului SVG care a nlocuiete utilizarea
tag-ului generic <object>. Aceste nouti sunt proiectate pentru a facilita
7
includerea i manipularea n WEB a coninuturilor multimedia i grafice
fr a fi nevoie s se recurg la proprietile de plugin i API. Alte noi
elemente ca <section>, <article>, <header> i <nav> sunt proiectate s
mbunteasc coninutul semantic al documentelor. Noi atribute au fost
introduse n acelai scop, n acelai timp unele elemente i atribute au fost
ndeprtate. Unele elemente ca <a>, <cite> i <menu> au fost
schimbate, redefinite i standardizate. API-urile i DOM-urile (document
object model) sunt certitudini i sunt pri fundamentale n specificaiile
HTML5. HTML5, de asemenea, definete n cteva detalii prelucrrile
necesare pentru documentele invalide, astfel nct sintaxa erorilor va fi
tratat uniform de toate browserele cunoscute.
2.2. CSS 3
Foile de stil n cascad (n limba englez Cascading Style Sheets sau
pe scurt CSS) este un limbaj folosit pentru descrierea aspectului i
formatrii unui document scris ntr-un limbaj de marcare (markup
language) n special limbajul HTML. Cea mai comun aplicare a sa este
formatarea paginilor WEB scrise n HTML i XHTML, dar limbajul poate fi de
asemenea aplicat oricarui tip de document XML, inclusiv XML de baz, SVG
i XUL.
CSS este destinat n principal pentru separarea coninutului unui
document (scris n HTML sau un limbaj similar) de aspectul documentului,
incluznd elemente cum ar fi aezare n pagin, culoare i fonturi. Aceast
separare poate mbuntii accesibilitatea coninutului, furniza mai mult
flexibilitate i control n specificarea formatrii, permite mai multor pagini
s mpart aceeai formatare i reduce complexitatea i repetitivitatea n
coninutul structural (de exemplu prim posibilitatea design-ului WEB fr a
folosi tabele). CSS poate de asemenea s permit prezentarea aceleiai
pagini n stiluri diferite, de exemplu pentru vizualizarea pe ecran, pentru
tiprire, sau pentru a fi folosite cu translatoare text-voce (cnd sunt citite
cu un cititor de ecran / screen reader). Poate fi de asemenea folosit pentru
a permite paginii WEB s fie afiat difereniat n funcie de dimensiunile
ecranului sau a dispozitivului pe care este afiat. Chiar dac autorul unui
document l leag pe acesta de un fiier CSS specific, cititorul acestuia
poate folosi un fiier CSS care formateaz diferit documentul, trecnd
peste specificaiile de formatare ale autorului.
CSS specific de asemenea o schem de prioritate pentru a
determina care dintre regulile de stil se aplic dac exist mai mult de o
regul care se poate aplica fiecrui element n parte. La aceasta se refer
cuvntul cascad din denumire, prioritile sunt calculate i regulile
desemnate, n aa fel nct rezultatul s fie previzibil.
Specificaiile CSS sunt ntreinute de ctre organizaia World Wide
Web Consortium (W3C). Tipul de media pentru Internet (MIME type)
8
text/css este nregistrat pentru folosire cu CSS prin RFC 2318 (Martie
1998).
CSS 3 spre deosebire de CSS 2, care este o singur specificaie
lrgit, definind mai multe caracteristici, este mprit n mai multe
documente separate numite "module". Fiecare modul adaug noi
posibiliti sau extinde caracteristici definite n CSS 2, pstrnd pe ct
posibil compatibilitatea cu versiunile anterioare. Prima versiune de lucru a
CSS 3 a fost publicat n Iunie 1999.
Datorit modularizrii, diferitele module se afl n diverse stadii de
stabilitate i implementare. Din Noiembrie 2011, sunt peste 50 de module
CSS publicate de grupul de lucru CSS Working Group. Trei dintre ele -
Selectors Level 3, Namespaces i Color - au devenit recomandri W3C n
2011.
Unele module (incluznd Backgrounds and Borders, Media Queries,
i Multi-column Layout printre altele) au statutul de Candidate
Recommendation (CR) i sunt considerate moderat de stabile.
CSS 3 suport de asemenea posibilitatea de adugare de coluri i
muchii rotunjite elementelor din paginile WEB prin proprietatea border-
radius i tot mai multe site-uri WEB folosesc aceast tehnic din motive
estetice.
2.2.1. Generaliti despre CSS
CSS constituie un instrument avansat de formatare a oricrui marcaj
HTML, n vederea realizrii unor pagini WEB profesionale.
Foile de stiluri HTML sunt asemntoare cu stilurile de formatare a
unui document WORD i permit introducerea unei mulimi de atribute prin
care se pot defini fonturi, culori, alinieri etc.
Consoriul Web W3C de la CERN(realizatorul spaiului Web) pune la
dispoziia creatorilor de pagini ntreaga specificaie CSS la locaia
http://www.w3.org/TR/REC-CSS2/
Legturile dintre HTML i CSS se realizeaz cu ajutorul elementului
STYLE.
Stilurile pot fi definite ca:
stiluri in-line care se definesc ca atribute STYLE. Aproape toate
elementele HTML(cu excepia elementelor BASE, HEAD, BASE FONT, HTML,
META, PARAM, SCRIPT, STYLE, TITLE) permit acest atribut. Valorile
atributului STYLE constau dintr-o list de specificaii, sub forma nume-
proprietate:valoare, pus ntre ghilimele i separate prin punct i virgul
foi de stil n interiorul unui document, plasate n partea de antet a
documentului, n interiorul blocului <STYLE>...</STYLE>
foi de stil, definite ntr-un fiier extern, care se poate lega la orice
pagin WEB
2.2.2. Stiluri interne (in-line)
9
n seciunile precedente am definit elementele HTML mpreun cu
atributele lor specifice, necesare realizrii paginilor WEB.
Majoritatea elementelor HTML (cu excepia celor enumerate mai sus)
admit urmtoarele atribute:
style - atribuie un stil intern unui element. Valorile posibile sunt
specificaii (declaraii) de stiluri, separate prin ;, ca de exemplu
style=font-style:italic; font-size=10pt
title - definete o informaie pentru un element. Valorile sunt iruri
de caractere scrise ntre ghilimele, care apar ntr-un chenar galben, atunci
cnd suntem cu mouse-ul deasupra elementului
dir - indic direcia de afiare a coninutului elementului. Valorile
posibile sunt: ltr-de la stnga la dreapta i rtl- de la dreapta la stnga
lang - definete limba n care va aprea scris coninutul elementului.
Valorile posibile sunt maxim 5 caractere ntre ghilimele, de exemplu en,
en-us
id - definete un identificator unic pentru un element (a fost folosit n
capitolul precedent ca atribut al elementului OBJECT)
class - definete o clas a elementului. Valorile posibile sunt liste de
unul sau mai muli identificatori separai prin spaiu, de exemplu
class=nume 1, ,numen
Stilul in-line pentru un element este introdus printr-un atribut STYLE.
Valoarea acestui atribut este o list de specificaii de stil, separate prin ;
i cuprinse ntre ghilimele.
O specificaie de stil sau o declaraie de stil este ca un atribut pentru
un marcaj, dar cu urmtoarea sintax:
nume proprietate :valoare-proprietate
unde:
nume-proprietate definete o proprietate i nu este cuvnt rezervat
valoare-proprietate - este o valoare credibil pentru proprietate
Cu ajutorul stilurilor interne pentru un element se poate obine o
mulime de efecte locale. Modelele de stil in-line se obin aadar prin
adugarea atributului style la anumite marcaje HTML, conform sintaxei:
style=specificaie1; specificaie2; ...; specificaien
2.2.3. Foi de stil n pagin

n aceast seciune vom extinde stilurile de la un element HTML,
cum au fost definite n seciunea precedent, la toate elementele de
acelai tip (de exemplu, P) dintr-un document. Pentru a defini foile de stil,
introducem noiunile de bloc de specificaii, selector i regul.
Un bloc de declaraii sau specificaii este o list de specificaii
separate prin ; i cuprinde ntre acolade, {...}, de exemplu:
{font-size:20pt ;color:red; font-style:italic;}.
ntr-un bloc de declaraii, ultimul simbol ; poate lipsi.
Un selector sau tip de declaraii este un obiect cruia i se aplic
declaraiile definite sau blocul de declaraii.
10
Exist mai multe categorii de selectori:
de tip - sunt elementele HTML, definite n capitolele trecute
Id - sunt identificatori introdui mai sus
Class - de clas
Universali - definii prin simbolul * i care se aplic oricrui
element
pseudo-clase - definesc clase a cror nume este un cuvnt rezervat
pseudo-elemente - definesc anumite pri dintr-un element
(de exemplu, prima liter dintr-un paragraf)
De exemplu, dac dorim s aplicm un stil oricrui element de tip
<P> din pagin, putem scrie P{font-size:15pt;color:red;text-align:center;}.
O regul sunt perechi formate dintr-un selector (sau tipul declaraiei)
i dintr-un bloc de declaraii, cu urmtoarea sintax:
selector{bloc de declaraii} sau selector{declaraia1; declaraian;}.
Foile de stil sunt alctuite dintr-un set de reguli.
Foile de stil se trec n interiorul tag-ului pereche <STYLE>
....</STYLE>, care se scrie n interiorul blocului de antet.
Dac se dorete aplicarea unui stil asupra mai multor elemente,
atunci selectorii se vor grupa ntr-o list de selectori, separai
prin virgul(),
s1,s2,s3 {..}.
Un atribut al elementului style este type, care definete sintaxa foii
de stil, utilizat la definirea declaraiilor. Atributul type are valoarea
prestabilit text/css.
Aa cum spune i numele, CSS semnific foi de stil n cascad, iar
text specific faptul c specificaiile de stil sunt reprezentate sub form
de text, care este i singura valoare posibil.
Dac se dorete s se asigure compatibilitatea cu browser-ele mai
vechi, care nu recunosc stilurile, foile de stil se pot include intr-un
comentariu HTML.
2.2.4.Foi de stil externe

n seciunea precedent am definit stiluri pentru selectorii de tip
(elemente HTML) dintr-un fiier HTML. n aceast seciune se arat cum se
pot extinde stilurile la toate paginile Web de pe server-ul utilizat.
Dac s-ar copia foaia de stil din pagina n care a fost definit n mai
multe pagini n care dorim s apar foaia de stil respectiv, ar aprea un
inconvenient, constnd n faptul c, atunci cnd se dorete o modificare de
stil, modificarea respectiv trebuie fcut n toate paginile n care a fost
copiat foia de stil.
Soluia de nlturare a acestui inconvenient const n executarea
urmtorilor pai:
se creeaz foaia de stil ntr-un fiier extern, care se salveaz cu
extensia .css
11
se leag acest fiier de orice pagin Web care dorim s aib acelai
aspect. Pentru a crea o legtur ntre o pagin Web i un fiier foaie de stil
extern (.css), se folosete tagul <LINK> care se scrie n blocul de antet
(<HEAD>...</HEAD>) al respectivei pagini.
Elementul LINK
Aa cum am menionat, legtura dintre o pagin i un fiier .css, se
realizeaz cu elementul LINK.
Sunt obligatorii trei atribute ale elementului LINK:
type - indic browser-ului limbajul n care este scris codul i are
valoarea unic text/css
rel - definete tipul de fiier .css i are valoarea stylesheet
hre f- are ca valoare adresa URL a fiierului foaie de stil extern
(.css), care conine foaia de stil care se leag.
Pentru exemplificare, considerm foaia de stil creat n exemplu 13.2
pe care o copiem ntr-un fiier nou Notepad i pe care l salvm cu extensia
.css astfel: stil-extern.css. n partea de cod a paginii se nlocuiete blocul
<STYLE> ... </STYLE> din antet cu tagul <LINK> plasat tot n antet.
2.2.5. Stiluri pentru diferii selectori

Stilurile se pot aplica selectorilor de tip (elemente HTML), aa cum s-
a procedat n seciunile precedente, sau altor selectori, care sunt elemente
definite de programatorii paginii Web, sau sunt elemente predefinite.
n aceast seciune, vor fi definii i exemplificai n subseciuni
separate:
selectorii definii - ID i CLASS
selectorii predefinii - pseudo-class i pseudo-element
Aproape orice marcaj HTML poate avea atributul ID, care are ca
valoare un identificator unic pentru ntreaga pagin. Sintaxa atributului
este ID=nume_id. Se pot crea stiluri pentru un identificator, declarnd
un selector ID care are sintaxa numeid precedat de simbolul # (ca la o
definire de ancor -), astfel #nume_id{bloc de specificaii stil}.
CSS poate defini i clase de elemente. Ca i atributul id, i atributul
class este acceptat de majoritatea elementelor HTML. Se pot utiliza clase
n definirea unui stil, sintaxa selectorului CLASS fiind numele clasei
precedat de simbolul punct (.), astfel: .nume-clas{bloc de declaraii}
Atributul class are sintaxa binecunoscut a atributelor elementelor
HTML:
class=nume-clas
n cazul n care se doresc mai multe stiluri de clas (c1{ }, c2{ },
cn{ })
atunci valoarea atributului class poate s fie o list de nume-clas,
separate prin spaii (class=c1 c2 cn),.
Dac se dorete o clas pentru un anumit element HTML (de
exemplu, pentru elementul <P>), atunci selectorul se definete prin nume
12
element i nume clas, separate prin punct (.). n acest caz stilurile vor
avea forma: element.nume-clas {bloc de specificaii de stil}.
2.2.6. Pseudo-clase
Pseudo-clasele ajut la specificarea unor proprieti speciale ale
unor elemente. Ele sunt predefinite i nu este permis redenumirea lor.
Sintaxa prin care se pot adresa este: element:pseudoclas{bloc de
declaraii}
unde element poate fi:
un element HTML - de exemplu, P
un identificator id i atunci scriem elementul ca un selector id,
#nume
o clas i atunci scriem elementul ca un selector de clas, .nume-
clas
Menionm faptul c blocul de declaraii este alctuit din declaraii
de stil cu forma: nume-proprietate:valoare, separate prin ; .
Vom exemplifica foile de stil pentru pseudo-clasele: first-child i
legturi
Pseudo-clasa first-child
Aceast pseudo-clas aplic stilul definit primului copil al
elementului printe i are sintaxa: element:first-child{...}.
n exemplul de mai jos formatm primul element (copil) dintr-o list
(printe) i prima linie (copil) dintr-un tabel (printe).
2.2.7. Pseudo-clase Legturi

Anterior am arta faptul c bold, subliniat n HTML, exist trei stri
pentru o legtur (activ, vizitat, nevizitat), iar pentru a le schimba
culorile predefinite (rosu, purple, bleu) se folosesc atributele elementului
BODY: active, vlink, respectiv link, care au valori nume sau cod de culoare.
n CSS o legtur poate fi n cinci stri ce corespund la cinci pseudo-
clase:
active - pentru o legtur activ, care are culoarea implicit
visited - pentru o legtur ce a fost vizitat i care are culoarea
implicit purple
link - pentru legturile care nu au fost vizitate i care au culoarea
implicit blue
hover - o legtur deasupra creia se afl plasat cursorul mouse-ului
focus - pentru o legtur selectat, care se poate activa cu ENTER
Pseudo-elementele sunt un fel de pseudo-clase, care permit s se

schimbe stilul pentru subpri ale unui element (de exemplu, prima liter
dintr-un paragraf). Se seteaz stilul ca la pseudo-clase: element:pseudo-
element{bloc de declaraii}.
Vom exemplifica pentru pseudo-elementele:
13
first-letter - care permite s se formateze prima liter dintr-un bloc
de text
first-line - care permite s se aplice un stil pentru prima linie dintr-
un bloc de text
2.2.8. Elementele DIV i SPAN
Elementele DIV i SPAN au fost introduse ca elemente de formatare
logic. Am menionat atunci c DIV este un element de nivel bloc, care
este afiat la nceput de rnd (ca i <P> sau <PRE>), iar elementul
<SPAN> este un element in-line, care poate fi afiat pe acelai rnd cu
textul (ca i B, I etc.) Spre deosebire de P, DIV nu las un rnd liber
nainte i dup el. Aceste elemente pereche nu accept niciun stil fizic
pentru coninut. Din acest motiv ele se utilizeaz mpreun cu CSS pentru
a ataa un stil la o seciune dintr-o pagin WEB, cuprins ntre tag-urile
<DIV> i </DIV> , <SPAN> i </SPAN>.
Am menionat atunci c singurul atribut al lui DIV este
align=valoare, atribut pe care SPAN nu l accept deoarece este element
in-line.
Utiliznd CSS se pot folosi atributele ID i CLASS i pentru DIV i
SPAN, care ne permit s introducem stiluri i pentru coninutul lor.
Elementul SPAN, chiar dac este element de linie, are sintaxa
<SPAN> coninut </SPAN> i permite introducerea coninutului ntr-o linie.
2.3. JavaScript
2.3.1. Generaliti
JavaScript este un limbaj de programare orientat pe obiecte i bazat
pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor
funcionaliti n paginile web, codul JavaScript din aceste pagini fiind rulat
de ctre browser. Limbajul este binecunoscut pentru folosirea sa n
construirea siturilor web, dar este folosit i pentru accesul la obiecte
ncastrate (embedded objects) n alte aplicaii. A fost dezvoltat iniial de
ctre Brendan Eich de la Netscape Communications Corporation sub
numele de Mocha, apoi LiveScript, i denumit n final JavaScript.
n ciuda numelui i a unor similariti n sintax, ntre JavaScript i
limbajul Java nu exist nici o legtur. Ca i Java, JavaScript are o sintax
apropiat de cea a limbajului C, dar are mai multe n comun cu limbajul
Self dect cu Java.
Pn la nceputul lui 2005, ultima versiune existent a fost JavaScript
1.5, care corespunde cu Ediia a 3-a a ECMA-262, ECMAScript, cu alte
cuvinte, o ediie standardizat de JavaScript. Versiunile de Mozilla
ncepnd cu 1.8 Beta 1 au avut suport pentru E4X, care este o extensie a
limbajului care are de a face cu XML, definit n standardul ECMA-357.
Versiunea curent de Mozilla, 1.8.1 (pe care sunt construite Firefox i
Thunderbird versiunile 2.0) suport JavaScript versiunea 1.7
14
Microsoft a implementat limbajul JavaScript sub numele de JScript,
cu o serie de modificri i extensii fa de implementarea Netscape. Pe
platforma Windows, JScript este unul din limbajele executabile de ctre
Windows Script i deci poate fi folosit pentru scriptarea aplicaiilor ce
suport Windows Script, de exemplu Internet Explorer, sau chiar sistemul
de operare Windows.
Cea mai des ntlnit utilizare a JavaScript este n scriptarea
paginilor web. Programatorii web pot ngloba n paginile HTML script-uri
pentru diverse activiti cum ar fi verificarea datelor introduse de
utilizatori sau crearea de meniuri i alte efecte animate.
Browserele rein n memorie o reprezentare a unei pagini web sub
forma unui arbore de obiecte i pun la dispoziie aceste obiecte script-
urilor JavaScript, care le pot citi i manipula. Arborele de obiecte poart
numele de Document Object Model sau DOM. Exist un standard W3C
pentru DOM-ul pe care trebuie s l pun la dispoziie un browser, ceea ce
ofer premiza scrierii de script-uri portabile, care s funcioneze pe toate
browserele. n practic, ns, standardul W3C pentru DOM este incomplet
implementat. Dei tendina browserelor este de a se alinia standardului
W3C, unele din acestea nc prezint incompatibiliti majore, cum este
cazul Internet Explorer.
O tehnic de construire a paginilor web tot mai ntlnit n ultimul
timp este AJAX, abreviere de la Asynchronous JavaScript and XML.
Aceast tehnic const n executarea de cereri HTTP n fundal, fr a
rencrca toat pagina web, i actualizarea numai anumitor poriuni ale
paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite
construirea unor interfee web cu timp de rspuns mic, ntruct operaia
(costisitoare ca timp) de ncrcare a unei pagini HTML complete este n
mare parte eliminat.
2.3.2. JavaScript Limbaj de scriptare

Programele enumerate mai sus sunt i limbajele de programare, ct
i de scriptare, n sensul c ambele tipuri de limbaje au ca scop s
faciliteze programatorilor posibilitatea de a determina browser-ul s
execute anumite aciuni, ca de exemplu tergerea unui cmp dintr-un
formular, validarea datelor introduse ntr-un formular, rspunsul la
evenimente, precum schimbarea unui obiect la trecerea peste acesta cu
mouse-ul etc.
Diferena important dintre cele dou tipuri const n faptul c un
limbaj de programare pune accent pe tipurile de date, n timp ce un limbaj
de scriptare nu este interesat de tipurile de date.
Un tip de dat definete tipul de valori de date folosite ntr-un
program, a tipului de operaii care se pot efectua cu valorile de date i
specific dimensiunea i tipul de informaie care poate fi plasat la o
anumit locaie a memoriei.
15
2.3.4. JavaScript Interpretor
Prin limbaj interpretor se nelege faptul c browser-ul preia cte o
instruciune, o execut i trece la urmtoarea, o preia i o execut s.a.m.d.
Din acest motiv, erorile la limbajele interpretate sunt mai greu de depistat,
deoarece nu exist compilatoare ca la limbajele de programare complexe
(Java, C, C++ etc.) Totui, putem s sesizm o eroare din faptul c dup ea
instruciunile nu mai pot fi executate.
2.3.5. JavaScript Limbaj orientat pe obiect

Se tie de la cursul Programare orientat pe obiecte ce nseamn un
limbaj orientat pe obiect.
Amintim c un limbaj de programare orientat pe obiect este un
limbaj cu ajutorul cruia se realizeaz programul utiliznd obiecte. Un
obiect este o instan a unei clase. De exemplu, dac considerm clasa
VEHICUL, trenul, avionul, maina etc. sunt instane ale acestei clase. Nu ne
propunem n aceast carte s dezvoltm paradigma orientrii pe obiect.
Programele de scriptare sunt programe orientate obiect, care folosesc
obiecte precum: formulare, cmpuri, butoane, fereastr, etc.
Un obiect este o reprezentare a unei entiti din lumea real sau
conceptual. Tot ce putem vedea, atinge, clasifica reprezint obiecte ale
lumii reale i tot ce putem gndi reprezint obiecte ale lumii imaginare. Un
obiect are 3 caracteristice: stare, comportament i identitate.
Starea unui obiect reprezint totalitatea datelor care conin
informaii referitoare la acesta, una din condiiile posibile n care poate
exista un obiect. Fiecare obiect are un numr de proprieti, numite i
atribute, care au o valoare. Valorile unei proprieti (atribut) pot face parte
dintr-un tip de baz (ntreg, real etc.) sau pot fi alte obiecte. Cu alte
cuvinte, starea unui obiect conine structura esenial a obiectului:
atributele i valorile sale. Starea unui obiect se modific n timp, de
exemplu, obiectul curs opional se poate afla n strile Predat sau Anulat
(n funcie de numrul de studeni care a optat pentru acel curs ).
Obiectele nu sunt izolate, ele comunic ntre ele, trimit mesaje.
Comportamentul unui obiect se refer la modul n care un obiect
reacioneaz (schimb starea) la mesajele primite, precum i la modul
cum acioneaz (trimite mesaje altor obiecte). n exemplul anterior,
obiectul curs Optional poate avea comportamentul: nscriere student,
reorientare student la alt curs optional.
Identitatea unui obiect este proprietatea prin care obiectul se
distinge de oricare alt obiect din sistem. Schimbarea strii unui obiect nu
influeneaz identitatea sa. Identitatea face un obiect s fie unic.
O pagin WEB poate conine mai multe obiecte, de exemplu pot
exista 2 formulare, form1 i form2, care aparin clasei FORMULARE. Ele
difer prin cmpurile lor. JavaScript le poate identifica astfel pe fiecare.
16
Uneori JavaScript trebuie s aib acces rapid la mai multe obiecte. n
acest caz, pentru a identifica fiecare obiect se poate folosi un tablou. La un
obiect ne putem gndi ca la un substantiv.
2.3.6. Metode
Relaiile dintre obiecte se numesc legturi. Un mesaj este o
comunicare ntre obiecte via legturi. La primirea unui mesaj, un obiect
sau o clas execut o operaie.
O metod reprezint implementarea unei operaii. Aadar, o metod
este o unitate de cod scris ntr-un limbaj orientat pe obiect. La o metod
ne putem gndi ca la un verb, pentru c are la baz o aciune, o operaie.
Dac ntr-un limbaj orientat pe obiect se definete o funcie i se scrie
codul care determin ce trebuie s execute funcia, atunci declaraia
funciei este o operaie, iar corpul funciei este o metod.
Dac considerm obiectul Submit al unui formular, atributurile nume
i dimensiune sunt proprieti (atribute ale obiectului). Dac se execut
clic pe buton, formularul este trimis ctre server, deci se execut o
operaie a crei implementare se numete metod. Proprietile i
legturile alctuiesc caracteristicile structurale, deoarece ele indic
structura obiectelor, iar operaiile i metodele sunt caracteristici dinamice,
deoarece ele comunic comportamentul obiectelor. n JavaScript se
folosete pentru definirea proprietilor i metodelor unui obiect
urmtoarea sintax: nume_obiect.proprietate ; nume_obiect.metod.
Un eveniment este o aciune ce se produce asupra unui element.
Cele mai frecvente evenimente sunt mesajele recepionate de un obiect.
Aciunile sunt intreprinse de obicei de persoanele care folosesc aplicaia,
de exemplu dac se execut clic pe un buton al unui formular (Submit,
Cancel), se trece n starea de execuie
2.4. jQuery
2.4.1. Elemente de baza
jQuery este o librarie de functii JavaScript creata de John Resig.

jQuery e centrat pe lucrul si manipularea elementelor HTML si CSS in
pagina web. Are de asemenea utilitati Ajax pentru transmitere de date la
server, functii pt. lucru cu obiecte, array si evenimente.
Aproape toate scripturile facute cu jQuery functioneaza la fel in
principalele navigatoare web.
2.4.2. Includere jQuery
Ca sa lucrati cu jQuery trebuie mai intai sa includeti libraria de

functii jQuery in pagina HTML, ca orice fisier cu cod JavaScript.
17
Puteti gasi si descarca ultima versiune de la pagina Download jQuery.
Salvati libraria jQuery pe server, intr-un fisier cu extensia ".js", apoi
includeti-l in documentul HTML, folosind urmatoarea sintaxa (in sectiunea
HEAD):
<script type="text/javascript" src="jquery_file.js"></script>
sau, in loc de a avea fisierul cu jQuery pe serverul dv., o metoda

alternativa de a include libraria jQuery este prin Google:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></scr
ipt>
Pentru a putea interactiona cu elementele HTML in pagina,

instructiunile script-ului trebuie executate dupa incarcarea paginii, astfel
tot codul jQuery se scrie in interiorul unei functii speciale "document
ready", aceasta executa codul din ea dupa incarcarea paginii.
Sintaxa:
<script type="text/javascript" src="jquery_file.js"></script>
$(document).ready(function() {
// tot codul jQuery se scrie aici
});
- Aproape toate comenzile si functiile jQuery se adauga in
acest "document-ready". In interiorul functiei "ready()" puteti
adauga orice cod JavaScript, precum variabile noi, obiecte,
instructiuni if(), for(), etc.
- Se poate inlocui $() cu jQuery() ; acesta e util ca sa se evite

conflicte cu alte aplicatii JavaScript care folosesc "$()".
2.4.3. Selectare elemente HTML in jQuery
Elementele (X)HTML se selecteaza cu jQuery prin adaugarea lor in $

("") (sau jQuery("") , se pot folosi ghilimele duble sau simple).
De exemplu, daca vreti sa selectati toate elementele <h3>, se foloseste:
$('h3') (sau jQuery('h3') ).
Daca vreti sa selectati tag-ul cu id="unid" , se scrie $('#unid').
Cand adaugati un selector jQuery in $(), returneaza un obiect jQuery

ce contine un set cu elementele selectate, potrivite cu acel selector.
Functia html() este o metoda jQuery care returneaza continutul HTML din
elementul la care e aplicata.
Selectorii jQuery sunt foarte asemanatori cu selectorii CSS, iata cateva
example:
$('*') - selecteaza toate elementele.
$('div') - selecteaza toate tag-urile <div>.
$('#un_id') - selecteaza un tag HTML cu id="un_id".
18
$('.a_class') - selecteaza toate tag-urile HTML cu class="a_class".
$('p#un_id') - selecteaza tagul <p> cu id="un_id".
$('li.a_class') - toate tag-urile <li> cu class="a_class".
$('li a') - toate tag-urile <a> din elementele <li>.
$('div a.a_class') - tag-urile <a> cu class="a_class", care sunt
adaugate in DIV-uri.
$('div.a_class p span') - toate tag-urile <span> din <p>-uri care
sunt adaugate in <div>-uri cu class="a_class".
jQuery suporta folosirea tuturor selectorilor CSS, inclusiv cei din
CSS3. Iata cateva example:
$('p>a') - selecteaza toate tag-urile <a> care sunt incluse direct
in paragrafe (<p>).
$('a:first') - selecteaza primul tag <a>.
$('h3:last') - selecteaza ultimul <h3> din pagina.
$('input[type=text]') - selecteaza elementele input care au tipul
(type) specificat la text.
$('p:odd') - selecteaza toate paragrafele cu numar de ordine
impar.
$('li:first-child') - selecteaza primul <li> din fiecare lista cu tag-uri
<li>.
jQuery are si cativa selectori proprii:
$(':button') - selecteaza elementele de tip buton (input sau
button).
$(':radio') - selecteaza butoanele tip radio.
$(':checkbox') - selecteaza checkbox.
$(':checked') - selecteaza elementele checkbox sau radio care
sunt selectate.
$(':header') - selecteaza elementele de tip Header (h1, h2, h3,
etc.).
$(':contains("String")') - selecteaza elementele care contin textul
specificat la "String".
jQuery poate selecta mai multi selectori intr-o singura declaratie,

separati prin virgula, intr-un singur sir.
De exemplu, daca vrem sa selectam fiecare <h2>, <div> cu
class="clas1", si <p> cu class="cls2" intr-o singura expresie, folosim
urmatoarea instructiune:
$('h2, div.clas1, p.cls2')
Pentru a obtine numarul de elemente selectate se foloseste

proprietatea length.
Sintaxa:
$('selector').length
Evenimente in jQuery
19
Evenimentele sunt actiuni pe care utilizatorul le efectueaza in pagina
web, cum ar fi click, miscarea mouse-ului, deschiderea unei ferestre de
browser, derularea paginii, apasarea unui buton la tastatura, etc
Se poate specifica executarea unor instructiuni cand un eveniment
este declansat, folosind urmatoarea sintaxa:
$('selector').tip_eveniment(function() {
// instructiuni care sa fie executate
// cand actiunea specificata la "tip_eveniment"
// este efectuata la elementele reprezentate de "selector"
});
Iata alte cateva tipuri de evenimente ce pot fi utilizate in jQuery:

blur - e declansat cand un element pierde "atentia" (cursorul nu
mai e pe el).
focus - e declansat cand se intra intr-un element.
hover - executa instructiunile cand mouse-ul este in cadrul
obiectului.
mouseover - declansat cand mouse-ul intra in cadrul obiectului.
mousemove - declansat cand mouse-ul se misca in cadrul
elementului.
keydown - actionat cand utilizatorul apasa un buton pe tastatura.
load - actionat cand un element si toate sub-elementele lui au fost
incarcate.
resize - trimis la obiectul window cand dimensiunea ferestrei
browser-ului e modificata.
scroll - declansat cand pagina (sau un anume obiect) e derulata.
submit - actionat cand utilizatorul incearca sa trimita datele dintr-
un formular.
select - declansat cand utilizatorul selecteaza un text adaugat intr-
o caseta <input type="text">, sau <textarea>.
Puteti adauga codul jQuery intr-un fisier extern ".js", apoi sa includeti
fisierul in documentul HTML, dupa codul care include libraria jQuery;
precum in aceasta sintaxa:.
<head>
<title>Titlu paginii</title>
src="jquery_library.js"></script>
<script type="text/javascript" src="codul_tau.js"></script>
</head>
20
Capitolul 3. Realizarea practic a site-ului
3.1. Structura site-ului
3.1.1. Generaliti
Structura unui site WEB, fie el simplu sau complex, este un aspect
foarte important al proiectrii acestuia. Dei pentru utilizatorul obinuit,
structura unui site se rezum n general la cele mai vizibile aspecte ale
sale i anume interfaa cu utilizatorul i structurarea informaiei coninute
n acesta, structura directoarelor, subdirectoarelor i fiierelor care
compun site-ul sunt eseniale pentru persoana sau echipa care l va
ntreine i dezvolta mai departe.
Structura unui site WEB, orict de simplu sau de complex, se
bazeaz pe cteva reguli de baz:
Claritatea
Flexibilitatea
Accesibilitatea
Optimizarea cutrii
Dac structura directoarelor unui site WEB este ierarhic, aceasta

permite celui care l editeaz i ntreine s gseasc rapid fiierele dorite,
chiar dac site-ul este unul cu multe fiiere. Din puctul de vedere al
utilizatorului, coninutul trebuie s fie uor accesibil din pagina principal a
site-ului.
Structura de fiiere a unui site WEB poate conine:
Pagina principal, cea care se deschide atunci cnd un
utilizator tasteaz numele de domeniu n browser. De
obicei aceasta se numete index.html sau index.php i
se gsete n directorul rdcin a site-ului.
Unul sau mai multe subdirectoare, uneori coninnd la
rndul lor cte o pagin principal n cazul unui site cu
un coninut de fiiere mai mare.
Mai multe fiiere n aceste subdirectoare.
Un director principal pentru grafic, care poate s
conin la rndul su subdirectoare cu imagini specifice
Un director pentru fiierele .css care definesc formatarea
paginilor.
Un director pentru scripturi javascript.
Dac site-ul are un coninut foarte mare de pagini i fiiere, acestea

pot fi grupate n directoare i subdirectoare specifice, dar structura
acestora nu trebuie s fie foarte complex i ramificat. Dac volumul de
21
pagini diferite este foarte mare, se prefer mprirea site-ului n
saubseciuni pentru care se vor folosi subdomenii.
3.1.2. Structura site-ului Obiective turistice ale Judetului Hunedoara
Structura site-ului Obiective turistice ale Judetului Hunedoara este

bazat pe recomandrile de structurare ale unui site WEB enumerate
anterior i const din fiiere .html, fiiere .css, fiiere .js i fiiere grafice
care conin imaginile folosite n site, fiecare dintre aceste fiiere fiind
grupate n subdirectoare specifice.
Figure 1
Figura 3.1.2.1. Structura site-ului.
Pagina principal index.html nu este singurul fiier .html care se afl

n directorul rdcin al site-ului, toate celelalte fiiere fiind grupate pe
categorii n subdirectoare rezervate lor. Subdirectorul css conine toate
fiierele de tip .css (style sheet), subdirectorul galerii conine fiiere .html
cu galerii de imagini specifice pentru fiecare hart i obiectiv turistic
prezentat n site, subdirectorul imagini conine toate fiierele grafice
utilizate n site, acestea fiind grupate n subdirectoare specifice n funcie
de galeriile n care vor fi afiate, subdirectorul javascript conine toate
fiierele .js cu scripturile folosite n realizarea site-ului, iar subdirectorul
popups conine fiiere .html cu informaiile care vor fi afiate n ferestre de
tip pop-up grupate n funcie de harta n care vor fi disponibile.
22
Figura 3.1.2.2. Coninutul directorului css.
Figura 3.1.2.4.- Coninutul directorului imagini.
23
Figura 3.1.2.5. Coninutul directorului javascript.
3.2. Componentele site-ului Obiective Turistice ale Judetului

Hunedoara i modul lor de funcionare
3.2.1. Pagina index.html

Pagina index.html este pagina principal a site-ului care se deschide
n momentul n care un utilizator tasteaz numele de domeniu n browser.
Este singura pagin html care se gsete n directorul rdcin al site-ului.
Folosete codificarea UTF - 8 pentru a afia corect caracterele
specifice limbii romne.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Stilul paginii i elementele folosite de scripturi sunt importate din

fiierul hartainteractiv.css care se gsete n directorul css.
<style type="text/css">@import "css/hartainteractiva.css";</style>
Se import de asemenea i scripturile javascript care asigur

interactivitatea paginii. Acestea sunt:
zoommap.js, care asigur efectul de zoom animat al
hrilor
24
setup.js, care permite desemnarea zonelor interactive
de pe hart i care face legtura ntre simbolurile grafice folosite
i coninutul interactiv care va fi afiat
jquery-1.3.2.min.js, care este o platform de
dezvoltare JavaScript, conceput pentru a uura i mbunti
procese precum traversarea arborelui DOM n HTML,
managementul inter-browser al evenimentelor, animaii i cereri
tip AJAX. Acesta trebuie ncrcrcat naintea celorlalte scripturi
din pagin.
<script type="text/javascript" src="javascript/jquery-

1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/zoommap.js"></script>
<script type="text/javascript" src="javascript/setup.js"></script>
Figura 3.2.1.1. Aspectul iniial al paginii index.html
Aezarea elementelor n pagin se face cu ajutorul unor elemente

<div> care formeaz un container care conine celelalte elemente n aa
fel nct aezarea n pagin s nu fie compromis atunci cnd pagina este
vizualizat pe monitoare cu rezoluii diferite. Mai jos este o schem a
aranjrii diferitelor elemente ale paginii.
Pentru a clarifica aceste afirmaii, vom arta pe scurt cum se

schimb aspectul paginii index.html n timpul funcionrii.
25
Figura 3.2.1.2. Aspectul paginii index.html Obiectivele turistice ale
Judetului Hunedoara.
Figura 3.2.1.3. Aspectul paginii index.html Obiectivele turistice ale

Judetului Hunedoara/Castelul Corvinilor.
26
La deschiderea site-ului, pe pagina index.html se afieaz titlul site-
ului, Obiectivele turistice ale Judetului Hunedoara.In partea stanga apare
un meniu care ofera posibilitatea de a intra pe una dintre atractiile
turistice pe care le contine situl sau pe pagina de contact si bineinteles
harta generala a Judetului Hunedoara (Figura 3.2.1.1.). Dac utilizatorul
execut un click pe o Obiective Turistice, se deschide, printr-un link direct,
obiectivele turistice ale Judetului Hunedoara(Figura 3.2.1.2.).iar daca se
selecteaza de exemplu Castelul Corvinilor apare
descrierea,imagini,contactul si harta. (Figura 3.2.1.3.). Restul paginii
index.html nu se modific.
Figura 3.2.1.3. Aspectul paginii Obiective turistice ale Judetului

Hunedoara/Castelul Corvinilor.
Dac utilizatorul execut click pe Castelul Corvinilor, se deschide o

fereastr care conine descriere,imagini,harta, un link la o descriere,o
galerie foto,o harta (Figura 3.2.1.3.). Restul paginii index.html nu se
modific. Textul descrierii apare ntr-o fereastra noua.
3.2.2. Paginile .html care afieaz galeriile foto.
Paginile care afieaz galeriile foto sunt asemntoare aa c vor fi

tratate la un loc, exemplificnd realizarea prin descrierea uneia singure.
27
Fiecare dintre aceste pagini .html care conin galerii foto, au nume
care s le identifice n funcie de harta i fereastra pop-up de care sunt
legate. Spre exemplificare am ales pagina dv2-1.html ceea ce nseamn c
este galeria foto legat de harta de nivel 2, harta detaliat a zonei Cetate
din Deva i conine imagini referitoare la fereastra pop-up numrul 1.
Pagina folosete codificare de tip UTF - 8 pentru a afia corect
caracterele specifice limbii romne.
Stilul paginii i formatarea diferitelor elemente se import din fiierul

galerie.css din directoru css, comun tuturor paginilor care conin galerii
foto.
<style type="text/css">@import "../css/galerie.css";</style>
Pagina folosete scripturile jquery-1.3.2.min.js i jquery.cycle.all.js,

ambele fiind platforme de dezvoltare JavaScript, conceput pentru a uura
i mbunti procese precum traversarea arborelui DOM n HTML,
managementul inter-browser al evenimentelor, animaii i cereri tip AJAX.
<script type="text/javascript" src="../javascript/jquery-

src="../javascript/jquery.cycle.all.js"></script>
De asemenea n toate paginile care conin galerii foto se folosete

un script care se execut imediat ce se ncarc DOM-ul i nainte de a se
ncrca coninutul paginii. Acesta definete variabilele necesare pentru
executarea animaiilor necesare galeriei foto.
<script type="text/javascript">
$('.galerie').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
Structura paginii este definit de un container care conine
elementele galeriei foto i ale butoanelor de navigare
<div id="container_galerie">
<h1 align="center">Cetatea Deva</h1>
<div class="galerie">
28
o list a imaginilor care vor fi afiate i care se gsesc n
subdirectoare cu acelai nume ca i numele paginii care conine galerie
foto
<img src= "../imagini/dv2-1/1.jpg" width="600" height="450" />

</div>
<ul id="nav">
<li id="prev"><a href="#">Anterior</a></li>
<li id="next"><a href="#">Urmtor</a></li>
</ul>
</div>
i un buton de nchidere a paginii.
<div id="inchidere" align="center">

<input type="button" value="nchide aceast fereastr"
onclick="self.close()">
</div>
3.2.3. Paginile .html care conin informaiile afiate n ferestrele pop-up
Paginile care conin informaiile afiate n ferestrele pop-up sunt

asemntoare aa c vor fi tratate la un loc, exemplificnd realizarea prin
descrierea uneia singure.
Fiecare dintre aceste pagini .html care conin informaii care vor fi
afiate n ferestrele pop-up, au nume care s le identifice n funcie de
harta i fereastra pop-up de care sunt legate. Pentru exemplificare am ales
pagina cetate_deva.html care are numele identic cu imaginea care conine
harta detliat a zonei respective.
Deoarece pagina nu este destinat spore a fi afiat n ntregime, nu
are nevoie de formatare i deci nu conine instruciuni de formatare i nici
nu le import dintr-un fiier .css. De asemenea nu conine etichete
<head> sau <body>. Elementele coninute n aceste pagini sunt
urmtoarele:
Un link blanc
<a href="javascript:void(0)"
care lucreaz mpreun cu scriptul zoommap.js pentru a deschide

fereastra pop-up specificat ce ctre proprietatea id
id="cetatea_deva"
printr-un element grafic

class="bullet"
29
aflat n poziia specificat n pixeli de ctre proprietatea rel .
rel="288-359"> </a>
care va deschide o fereastr pop-up specificat de proprietatea id .

<div class="popup" id="cetatea_deva-box">
Urmeaz informaiile propriuzise care vor fi afiate n fereastra pop-

up i care sunt limitate de dimensiunile ferestrei respective, stabilite n
fiierul hartainteractiva.css .
<h3>Cetatea Deva</h3>
<div class="popupcontent">
<p>Cetatea romanic a Devei dateaz din anul 1269 i este
situat n Rezervaia Natural dealul Cetii, situat n nordul oraului.
Accesul spre Cetatea Deva se poate realiza att pe jos, pornind din parcul
oraului ( Parcul Cetii ) ct i cu ajutorul telecabinei ce pleac din
piaa de la poalele cetii.</p>
Apoi se afieaz un link spre pagina care conine galeria foto (dac
exist) referitoare la acest punct de interes de pe hart
<p align="center"><a href="galerii/dv2-1.html"
target="_blanc">Vezi imagini</a></p>
</div>
i un link de nchidere a ferestrei pop-up.

<a class="close" href="javascript:void(0)">nchide</a>
</div>
Aceeai structur se repet pentru fiecare punct de interes marcat

cu un element grafic class=bullet de pe harta cruia i corespunde acest
fiier cu informaii.
<a href="javascript:void(0)" id="telecabina" class="bullet" rel="450-
354"> </a>
<div class="popup" id="telecabina-box">
<h3>Telecabina spre Cetatea Deva</h3>
<p>Pentru a pune in valoare potentialul turistic al zonei si
pentru a facilita accesul catre Cetatea Devei, in anul 2003 au inceput
lucrarile pentru constuirea unei telecabine pe Dealul Cetatii. Telecabina
este singurul ascensor inclinat din Romania, iar din punct de vedere al
lungimii traseului - 278 metri si a diferentei de nivel - 158 metri este
primul din Europa.</p>
<p align="center"><a href="galerii/dv2-2.html" target="_blanc">Vezi
imagini</a></p>
</div>
</div>
30
<a href="javascript:void(0)" id="magna_curia" class="bullet" rel="341-
528"> </a>
<div class="popup" id="magna_curia-box">
<h3>Palatul Magna Curia (Muzeul Civilizaiei Dacice i Romane)</h3>
<p>Magna Curia (latin Curtea Mare) sau Castelul Bethlen se
situeaz n municipiul Deva, la poalele dealului cetaii, nspre sud-est,
lng parcul oraului. Este cea mai veche cldire monument istoric ce se
pstreaz n Deva. n anul 1582 cpitanul garnizoanei cetii din Deva,
Francisc Geszty, construiete pe locaia actualului monument o cas. n
1621 Gabriel Bethlen dispune de transformarea radical a construciei
iniiale, rezultnd palatul Magna Curia. Actualmente cldirea adpostete
Muzeul Civilizaiei Dacice i Romane.</p>
</div>
</div>
Pot fi adugate un numr limitat de diviziuni cu informaii deoarece

fiecare element grafic de marcare are dimensiuni de 20x20 pixeli i nu pot
fi suprapuse, deci numrul lor depinde de dimensiunea hrii.
3.2.4. Fiierul hartainteractiv.css
Fiierul hartainteractiv.css este folosit pentru formatarea interfeei

grafice dar lucreaz de asemenea n strns legtur cu scriptul
zoommap.js deoarece definete i poziioneaz multe din elementele
folosite n script.
Prima parte a fiierului se refer strict la formatarea paginii
index.html definind i poziionnd elementele de tip <div> care formeaz
containerul i zonele de afiare a informaiei
#container {
width:1200px;
margin:20px auto;
}
#stanga {
float:left;
width:700px;
border-style:ridge;
border-color:#3E7C02;
}
#dreapta {
float:right;
width:420px;
border-style:ridge;
padding:20px;
}
#jos {
clear:both;
}
31
elementul <h1> acioneaz ca indicator al funcionrii scripturilor
jquery-1.3.2.min.js i setup.js fiind setat din fiierul .css ca text-decoration:
none; dar n momentul n care se apeleaz scriptul setup.js, text-
decoration: se schimb n underline.
#h1 {
text-decoration:none;
}
Mai apoi se definesc i se formateaz elementele interactive ale

hrii.
Zona hrii propriuzise
#map {
position: relative; width: 710px; height: 710px; overflow: hidden;
}
link-ul de revenire la harta de nivel imediat superior

#returnlink {
display: block; position: absolute; bottom: 0; right: 0; color: white;
background: #4B7026; padding: 3px;
}
simbolul grafic care marcheaz un punct de interes

#map a.bullet {
display: block; position: absolute; width: 20px; height: 20px;
background: yellow; text-decoration: none; border: 1px solid red;
opacity: .7; z-index: 2;
}
zonele pe care se execut click pentru accesarea sub-hrilor

detaliate
#map img.zoomable { }
fereastra de tip pop-up

#map div.popup {
display: none; position: absolute; width: 250px; top: 200px; left:
200px; background: white; z-index: 3; padding: 10px; border: 2px solid
black; }
i link-ul de nchidere a ferestrei pop-up.

#map div.popup a.close {
display: block; position: absolute; bottom: 0; right: 0;
}
32
3.2.5. Fiierul galerie.css
Fiierul galerie.css este folosit pentru formatarea paginilor .html care

afieaz galeriile foto i lucreaz de asemena n strns legtur cu
scriptul de la nceputul acestor pagini, definind i formatnd containerul n
care se afieaz imaginile precum i elementele de navigaie.
/* Document CSS */
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
body {
background:url(../imagini/background.jpg) repeat-x;
}
Containerul care conine galeria i butoanele de navigaie

#container_galerie {
width: 632px;
margin: 100px auto 0 auto;
position:relative;
}
galeria propriuzis
.galerie {
height: 482px;
}
imaginile afiate n galerie

.galerie img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
elementele de navigaie
#nav {
list-style-type:none;
z-index:150;
}
link-urile de navigaie sunt scoase n afara zonei vizibile

#nav li a {
display:block;
width:58px;
height:102px;
text-indent:-9999px;
33
outline:none;
}
i sunt nlocuite cu imagini, att pentru starea normal ct i

pentru momentul n care cursorul mouse-ului se afl deasupra lor.
#prev a {
background:url(../imagini/stanga.png);
width:58px;
height:102px;
position:absolute;
top:220px;
left:-70px;
}
#next a {
background:url(../imagini/dreapta.png);
width:58px;
height:102px;
position:absolute;
top:220px;
right:-70px;
}
#next a:hover {
background:url(../imagini/dreapta_over.png);
}
#prev a:hover {
background:url(../imagini/stanga_over.png);
}
Diviziunea n care se afieaz butonul de nchidere a ferestrei.

#inchidere {
position:relative;
}
</style>
3.2.6. Scriptul setup.js
Scriptul setup.js este folosit pentru a configura partea de hart

interactiv a site-ului. n acest script se definesc elementele care vor fi
folosite la implementarea i poziionarea hrii propriuzise, a ferestrelor
pop-up i a elementelor grafice care marcheaz punctele de interes de pe
hart. De asemenea aici se definete i numrul i structura arborescent
a hrilor care vor fi afiate pe site. Acest script lucreaz n strns
legtur cu fiierul hartainteractiva.css, folosind elemente definite n acel
fiier.
Scriptul se execut imediat ce se ncarc DOM-ul i nainte de a se

ncrca coninutul paginii.
34
$(document).ready(function(){
Elementul <h1> funcioneaz ca indicator al funcionrii scripturilor

jquery-1.3.2.min.js i setup.js fiind setat din fiierul .css ca text-decoration:
none; dar n momentul n care se apeleaz scriptul setup.js, text-
decoration: se schimb n underline.
$('h1').css({textDecoration: 'underline'});
Se stabilesc dimensiunile hrii

$('#map').zoommap({
width: '700px',
height: '700px',
se definete calea spre fiierul blank.gif folosit n animaia efectului de zoom

blankImage: 'imagini/blank.gif',
se stabilete durata animaiei efectului de zoom

zoomDuration: 1000,
se stabilete un offset pentru a poziiona elementul bullet pentru

a fi centrat pe punctul de interes de pe hart pe care l marcheaz
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
se definesc clase i identificatori care vor fi folosii n efectul de zoom

zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
se implementeaz linkul pentru revenire la harta de nivel imediat superior, stabilind

dac trebuie afiat, care este identificatorul ei i care este textul care va fi afiat
showReturnLink: true,
returnId: 'returnlink',
returnText: 'napoi la harta anterioar',
se definete harta de nivel 1 care va fi afiat iniial la deschiderea site-ului

map: {
id: 'harta_generala', //Identificatorul hrii
image: 'imagini/harta_generala.jpg', //Imaginea care conine
harta
data: 'popups/harta_generala.html', //Fiierul care conine
datele afiate n ferestrele pop-up
se definesc sub-hrile de nivel 2 care se vor deschide din harta
iniial de nivel 1, ncepnd cu prima sub-hart
35
maps: [
{
id: 'deva', //Identificatorul sub-hrii

parent: 'harta_generala', //Harta printe
image: 'imagini/deva.jpg', //Imaginea care conine sub-
harta
data: 'popups/deva.html', //Fiierul care conine datele
afiate n ferestrele pop-up
width: '60px', //Dimensiunile careului care conine sub-
harta pe harta printe
height: '60px',
top: '262px', //Poziia careului care conine sub-harta pe
harta printe
left: '288px',
se definesc sub-hrile de nivel 3 care se vor deschide din prima

sub-hart de nivel 2 definit anterior
maps: [
{
id: 'cetate_deva', //Identificatorul sub-hrii
parent: 'deva', //Harta printe
image: 'imagini/cetate_deva.jpg', //Imaginea care
conine sub-harta
data: 'popups/cetate_deva.html', //Fiierul care
conine datele afiate n ferestrele pop-up din harta curent
width: '60px', //Dimensiunile careului care conine
sub-harta pe harta printe
height: '60px',
top: '147px', //Poziia careului care conine sub-
left: '227px'
se pot defini mai multe sub-hri de nivel 3 care se deschid din

prima sub-hart de nivel 2 i de asemenea oricte sub-hri mbricate de
nivel 3, 4, etc. cu o comand de forma maps:[ ]
}
]
},
a doua sub-hart de nivel 2 care se deschide din harta iniial de

nivel 1
{
id: 'hunedoara', //Identificatorul sub-hrii
image: 'imagini/hunedoara.jpg', //Imaginea care conine sub-
harta
data: 'popups/hunedoara.html', //Fiierul care conine datele
afiate n ferestrele pop-up din harta curent
width: '60px', //Dimensiunile careului care conine sub-harta
pe harta printe
height: '60px',
36
harta printe
left: '298px',
de asemenea i aceast hart poate avea unba sau mai multe

sub-hri de nivel 3
maps: [
{
id: 'castel_hunedoara', //Identificatorul sub-
hrii
parent: 'hunedoara', //Harta printe
image: 'imagini/castel_hunedoara.jpg', //Imaginea
care conine sub-harta
data: 'popups/castel_hunedoara.html', //Fiierul
care conine datele afiate n ferestrele pop-up din harta curent
height: '60px',
left: '130px'
se pot defini mai multe sub-hri de nivel 3 care se deschid din

prima sub-hart de nivel 2 i de asemenea oricte sub-hri mbricate de
nivel 3, 4, etc. cu o comand de forma maps:[ ]
}
]
}
]
}
});
});
3.2.7. Scriptul zoommap.js
Scriptul zoommap.js folosete elementele definite n fiierul

hartainteractiva.css i scriptul setup.js pentru a concretiza realizarea hrii
interactive.
(function($) {
$.fn.zoommap = function(settings) {
settings = $.extend({
zoomDuration: 1000,
37
returnText: 'napoi la harta anterioar'
}, settings);
$(this).each(function(){
var map = $(this);
$(this).data('currentId', '');
function showMapById(id){
var region = findRegion(settings.map, id);
if(region != -1){
displayMap(region);
}
}
Se folosete o metod recursiv pentru gsirea id-ului hrii
function findRegion(root, id){

if(root.id == id){
return root;
}else{
if(root.maps != undefined){
for(var i=0; i<root.maps.length; i++){
var possible = findRegion(root.maps[i], id);
if(possible != -1)
return possible;
}
}
}
return -1;
}
dac regiunea este o hart se apeleaz funcia de afiare cu efect

de zoom
function displayMap(region){
se seteaz id-ul hrii
$(this).data('currentId', region.id);
se terge harta afiat anterior i se seteaz imaginea de fundal a

hrii ce va fi afiat
map.empty().css({
backgroundImage: 'url(' + region.image + ')',
width: settings.width,
height: settings.height
});
38
var check = map.css('background-image');
Se ncarc datele noii regiuni
loadRegionData(region);
}
se afieaz link-ul de revenire la harta de nivel imediat superior
function showReturnLink(region){
map.append('<a href="javascript:void(0);" id="' +
settings.returnId + '">' + settings.returnText + '</a>');
$('#' + settings.returnId).hide().fadeIn().click(function()
{
showMapById(region.parent);
});
}
se ncarc simbolurile grafice care marcheaz locurile de interes

de pe hart unde se vor deschide ferestrele pop-up
function loadRegionData(region){
var url = region.data;
map.load(url, {}, function(){
se plaseaz simbolurile care marcheaz locurile de interes de pe

hart la poziiile respective
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: addpx(Number(coords[0]) -
rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) -
rempx(settings.bulletHeightOffset))})
.hide()
.click(function(){showPopup($
(this).attr('id'));})
.fadeIn('fast');
});
se seteaz eventualele subhri cca zone pe care se poate efectua

click
if(region.maps != undefined){
for(var i=0; i<region.maps.length; i++){
addZoom(region.maps[i]);
}
}
se creaz link-ul de revenire
39
if(settings.showReturnLink && region.parent !=
undefined){
showReturnLink(region);
}
});
}
function showPopup(id, leftbul, topbul){

map.find(settings.popupSelector).fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$(settings.popupCloseSelector).click(function(){
$(this).parent().fadeOut();
});
}
se adaug imaginile pentru regiunile de pe hart
function addZoom(region){
$('<img />').addClass(settings.zoomClass)
.attr({
src: settings.blankImage,
id: region.id
}).css({
position: 'absolute',
width: region.width,
height: region.height,
top: region.top,
left: region.left,
cursor: 'pointer'
}).appendTo(map).click(function(){
ascunde simbolurile grafice care marcheaz punctele de interes

de pe hart i eventualele regiuni pe care dse poate efectual click pentru
deschiderea de sub-hri din harta anterioar...
var width = settings.width;

var height = settings.height;
if(region.scan){
width = region.scanwidth;
height = region.scanheight;
}
$(this).siblings().fadeOut();
$(this).hide()
.attr('src', region.image).load(function(){
$(this).fadeIn('slow')
.animate({
width: width,
height: height,
top: '0px',
left: '0px'
}, settings.zoomDuration, '',
function(){
displayMap(region);
40
});
});
});
}
function rempx(string){
return Number(string.substring(0, (string.length - 2)));
}
function addpx(string){
return string + 'px';
}
function showHash(string){
string = string.replace('#', '');
showMapById(string);
}
iniializarea i afiarea hrii
var hash = self.document.location.hash;

if(hash.length > 0)
showHash(hash);
else{
displayMap(settings.map);
}
return this;
});
}
})(jQuery);
3.3. Concluzii
Dei tehnologia Ajax ct i limbajul JavaScript mpreun cu platforma
de dezvoltare jQuery au anumite dezavantaje, n acest caz folosirea lor
mpreun cu HTML5 i CSS3 ofer o alternativ viabil i fr probleme de
performan la folosirea de limbaje mai complexe cum ar fi platforma
software Adobe Flash, care se folosete n general pentru astfel de
aplicaii. Nu trebuie trecut cu vederea i aspectul financiar, innd cont de
faptul c JavaScript i jQuery sunt oferite sub liceniere gratuit (Licena
Public General GNU), fiind open source.
Este foarte probabil ca odat cu generalizarea suportului pentru
HTML5 i CSS3 n toate browserele moderne, toate aceste tehnologii s fie
folosite pe scar din ce n cemai larg pentru realizarea de site-uri
interactive.
41
4. ANEXE
Anexa 1 - Scriptul setup.js

$(document).ready(function(){
$('h1').css({textDecoration: 'underline'});
$('#map').zoommap({
// Dimensiunile hrii
width: '700px',
height: '700px',
//Setri pentru efectul de zoom i poziionarea marcajelor pentru

locaiile cu ferestre pop-up
blankImage: 'imagini/blank.gif',
zoomDuration: 1000,
//Clase i identificatori folosii pentru efectul de zoom

//Setri pentru link-ul de revenire la harta anterioar

showReturnLink: true, //valoarea "true" afieaz link-ul de
revenire
returnText: 'napoi la harta anterioar', //Textul afiat n link-
ul de revenire
//Regiunea iniial care va fi afiat, nivelul 1

map: {
id: 'harta_generala', //Identificatorul hrii
image: 'imagini/harta_generala.jpg', //Imaginea care conine
harta
data: 'popups/harta_generala.html', //Fiierul care conine
datele afiate n ferestrele pop-up
//Sub-hri de nivel 2 care pot fi deschise cu efectul zoom din
harta afiat iniial
maps: [
{
id: 'deva', //Identificatorul sub-hrii

image: 'imagini/deva.jpg', //Imaginea care conine sub-
harta
data: 'popups/deva.html', //Fiierul care conine datele
width: '60px', //Dimensiunile careului care conine sub-
height: '60px',
42
harta printe
left: '288px',
//Sub-hri de nivel 3 care pot fi deschise cu efectul zoom

din sub-harta de nivel 2
maps: [
{
id: 'cetate_deva', //Identificatorul sub-hrii
parent: 'deva', //Harta printe
image: 'imagini/cetate_deva.jpg', //Imaginea care
conine sub-harta
data: 'popups/cetate_deva.html', //Fiierul care
conine datele afiate n ferestrele pop-up
height: '60px',
left: '227px'
/* se pot crea mai multe sub-hri cu o

instruciune de tipul:
maps : [ ]
*/
}
]
},
{
id: 'hunedoara', //Identificatorul sub-hrii
image: 'imagini/hunedoara.jpg', //Imaginea care conine sub-
harta
data: 'popups/hunedoara.html', //Fiierul care conine datele
width: '60px', //Dimensiunile careului care conine sub-harta
pe harta printe
height: '60px',
harta printe
left: '298px',
maps: [
{
id: 'castel_hunedoara', //Identificatorul sub-
hrii
parent: 'hunedoara', //Harta printe
image: 'imagini/castel_hunedoara.jpg', //Imaginea
care conine sub-harta
data: 'popups/castel_hunedoara.html', //Fiierul
care conine datele afiate n ferestrele pop-up
height: '60px',
43
left: '130px'

maps : [ ]
*/
}
]
maps : [ ]
*/
}
]
}
});
});
Anexa 2 - Scriptul zoommap.js
(function($) {
$.fn.zoommap = function(settings) {
settings = $.extend({
zoomDuration: 1000,
returnText: 'apoi la harta anterioara'
}, settings);
$(this).each(function(){
var map = $(this);
$(this).data('currentId', '');
function showMapById(id){
var region = findRegion(settings.map, id);
if(region != -1){
displayMap(region);
}
}
// gasirea recursiva a id-urilor

function findRegion(root, id){
if(root.id == id){
44
return root;
}else{
if(root.maps != undefined){
for(var i=0; i<root.maps.length; i++){
var possible = findRegion(root.maps[i], id);
if(possible != -1)
return possible;
}
}
}
return -1;
}
// Regiunea este o harta

// Functia apelata pentru efectul de zoom
function displayMap(region){
//Setarea id-ului regiunii curente
$(this).data('currentId', region.id);
//Sterge harta si seteaza imaginea de fundal

map.empty().css({
backgroundImage: 'url(' + region.image + ')',
width: settings.width,
height: settings.height
});
var check = map.css('background-image');
//carca RegionData
loadRegionData(region);
}
/**************************************************************************
**********/
//Afiseaza Link-ul de revenire

function showReturnLink(region){
map.append('<a href="javascript:void(0);" id="' +
settings.returnId + '">' + settings.returnText + '</a>');
$('#' + settings.returnId).hide().fadeIn().click(function()
{
showMapById(region.parent);
});
}
//carca marcatorii
function loadRegionData(region){
var url = region.data;
map.load(url, {}, function(){
//Plaseaza marcatorii
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: addpx(Number(coords[0]) -
rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) -
rempx(settings.bulletHeightOffset))})
.hide()
45
.click(function(){showPopup($
(this).attr('id'));})
.fadeIn('fast');
});
//Seteaza fiecare sub-harta ca un obiect pe care se
poate face click
if(region.maps != undefined){
for(var i=0; i<region.maps.length; i++){
addZoom(region.maps[i]);
}
}
//Creaza link-ul de revenire
if(settings.showReturnLink && region.parent !=
undefined){
showReturnLink(region);
}
});
}
function showPopup(id, leftbul, topbul){

map.find(settings.popupSelector).fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$(settings.popupCloseSelector).click(function(){
$(this).parent().fadeOut();
});
}
//adauga o imagine pe care se poate face click pentru o regiune

de pe harta curenta
function addZoom(region){
$('<img />').addClass(settings.zoomClass)
.attr({
src: settings.blankImage,
id: region.id
}).css({
position: 'absolute',
width: region.width,
height: region.height,
top: region.top,
left: region.left,
cursor: 'pointer'
}).appendTo(map).click(function(){
//ascunde marcatorii si zonele cu zoom din
apropiere
var width = settings.width;
var height = settings.height;
if(region.scan){
width = region.scanwidth;
height = region.scanheight;
}
$(this).siblings().fadeOut();
$(this).hide()
.attr('src', region.image).load(function(){
$(this).fadeIn('slow')
.animate({
46
width: width,
height: height,
top: '0px',
left: '0px'
}, settings.zoomDuration, '',
function(){
displayMap(region);
});
});
});
}
function rempx(string){
return Number(string.substring(0, (string.length - 2)));
}
function addpx(string){
return string + 'px';
}
function showHash(string){
string = string.replace('#', '');
showMapById(string);
}
//initializeaza harta
var hash = self.document.location.hash;
if(hash.length > 0)
showHash(hash);
else{
displayMap(settings.map);
}
return this;
});
}
})(jQuery);
Anexa 3 - Fiierul hartainteractiva.css

/* Document CSS */
#container {
width:1200px;
margin:20px auto;
}
#stanga {
float:left;
width:700px;
border-style:ridge;
}
#dreapta {
float:right;
width:420px;
47
border-style:ridge;
padding:20px;
}
#jos {
clear:both;
}
#h1 {
text-decoration:none;
}
#map {
position: relative; width: 710px; height: 710px; overflow: hidden;
}
#returnlink {
display: block; position: absolute; bottom: 0; right: 0; color: white;
background: #4B7026; padding: 3px;
}
#map a.bullet {
display: block; position: absolute; width: 20px; height: 20px;
background: yellow; text-decoration: none; border: 1px solid red;
opacity: .7; z-index: 2;
}
#map img.zoomable { }
#map div.popup {
display: none; position: absolute; width: 250px; top: 200px; left:
200px; background: white; z-index: 3; padding: 10px; border: 2px solid
black; }
#map div.popup a.close {
display: block; position: absolute; bottom: 0; right: 0;
}
Anexa 4 - Fiierul galerie.css

/* Document CSS */
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
body {
background:url(../imagini/background.jpg) repeat-x;
}
#container_galerie {
width: 632px;
margin: 100px auto 0 auto;
position:relative;
}
.galerie {
height: 482px;
}
.galerie img {
48
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#nav {
list-style-type:none;
z-index:150;
}
#nav li a {
display:block;
width:58px;
height:102px;
text-indent:-9999px;
outline:none;
}
#prev a {
background:url(../imagini/stanga.png);
width:58px;
height:102px;
position:absolute;
top:220px;
left:-70px;
}
#next a {
background:url(../imagini/dreapta.png);
width:58px;
height:102px;
position:absolute;
top:220px;
right:-70px;
}
#next a:hover {
background:url(../imagini/dreapta_over.png);
}
#prev a:hover {
background:url(../imagini/stanga_over.png);
}
#inchidere {
position:relative;
}
</style>
Anexa 5 - Pagina index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro">
<head>
<title>Hunedoara Turistic</title>
<style type="text/css">@import "css/hartainteractiva.css";</style>
<script type="text/javascript" src="javascript/jquery-
<script type="text/javascript" src="javascript/zoommap.js"></script>
<script type="text/javascript" src="javascript/setup.js"></script>
49
</head>
<body bgcolor="#CFE1BD">
<div id="container">
<div id="sus">
<h1 align="center">Hart turistic interactiv a zonei Deva - Hunedoara
i mprejurimi</h1>
</div>
<div id="stanga">
<div id="map"></div>
</div>
<div id="dreapta">
<h2 align="left">Instruciuni de folosire</h2>
<ul>
<li><img src="imagini/chenar.gif" alt="Chenar" width="60"
height="60"> - Acest chenar delimiteaz o zon de pe hart care poate fi
mrit pentru a se vizualiza o hart detaliat. </li><br/>
<li><img src="imagini/popup.jpg" alt="Popup" width="20"
height="20"> - Acest simbol reprezint un punct de pe hart unde se gsete
un obiectiv turistic despre care se pot afia detalii suplimentare printr-o
caset "pop-up". </li>
</ul>
</div>
<div id="jos">
</div>
</div>
</body>
</html>
Anexa 6 - Pagina harta_generala.html

<a href="javascript:void(0)" id="Cricior" class="bullet" rel="295-
35"> </a>
<div class="popup" id="Cricior-box">
<h3>Biserica medieval de la Cricior</h3>
<p>Biserica "Adormirii Maicii Domnului" din Cricior, biseric
monument istoric construit la sfritul sec. al XIV-lea. </p>
</div>
</div>
<a href="javascript:void(0)" id="sarmisegetuza_regia" class="bullet"

rel="605-550"> </a>
<div class="popup" id="sarmisegetuza_regia-box">
<h3>Sarmisegetuza Regia </h3>
50
<p>Sarmizegetusa Regia (= cea regeasc), situat n satul
Grditea Muncelului, judeul Hunedoara, a fost capitala Daciei preromane.
Cetatea de pe Dealul Grditei este cea mai mare dintre fortificaiile
dacice. Aflat pe vrful unei stnci, la 1.200 de metri nlime,
fortreaa a fost centrul strategic al sistemului defensiv dac din Munii
Ortiei, i cuprindea 6 citadele. Cetatea dacic Sarmizegetusa Regia a
fost inclus pe lista patrimoniului cultural mondial UNESCO.</p>
<p align="center"><a href="galerii/gen2.html" target="_blanc">Vezi
imagini</a></p>
</div>
</div>
<a href="javascript:void(0)" id="ulpia_traiana_sarmisegetuza"

class="bullet" rel="230-685"> </a>
<div class="popup" id="ulpia_traiana_sarmisegetuza-box">
<h3>Ulpia Traiana Sarmisegetuza</h3>
<p>Ulpia Traiana Sarmizegetusa (pe numele su complet Colonia
Ulpia Traiana Augusta Dacica Sarmizegetusa) a fost capitala Daciei romane,
situat la o distan de 40 de km de Sarmizegetusa Regia, capitala Daciei.
Ruinele oraului antic constituie azi obiectul unui complex arheologic n
localitatea Sarmizegetusa, judeul Hunedoara.</p>
</div>
</div>
<a href="javascript:void(0)" id="castelul_kendeffy" class="bullet"

rel="370-587"> </a>
<div class="popup" id="castelul_kendeffy-box">
<h3>Castelul Kendeffy din Sntmrie Orlea</h3>
<p>Castelul Kendeffy se afl n localitatea Sntmria Orlea
din judeul Hunedoara. A fost construit de ctre familia Kendeffy n 1782,
o familie de nobili foarte bogai la acea vreme, care aveau nevoie de o
reedin n ara Haegului. Edificiul a fost naionalizat n 1946 de ctre
comuniti, iar din anul 1982 castelul a fost preluat de ctre administraia
judeean Hunedoara i transformat n hotel.</p>
</div>
</div>
<a href="javascript:void(0)" id="parcul_dendrologic_simeria" class="bullet"

rel="395-297"> </a>
<div class="popup" id="parcul_dendrologic_simeria-box">
<h3>Parcul Dendrologic Simeria</h3>
<p>Arboretumul Simeria este o arie protejat de interes
naional ce corespunde categoriei a IV-a IUCN (rezervaie natural de tip
dendrologic i peisagistic), situat n judeul Hunedoara, pe teritoriul
administrativ al oraului Simeria. Rezervaia natural (numit colocvial i
Parcul dendrologic Simeria) cuprinde cea mai veche i valoroas colecie de
plante exotice i autohtone din Romnia, cu peste 200 de taxoni, ntr-un
ansamblu peisagistic deosebit. Rezervaia se ntinde pe o suprafa de 70
ha, clasndu-se astfel pe locul 3 n Europa i pe locul 11 n lume conform
Encyclopdia Britannica.</p>
</div>
51
</div>
<a href="javascript:void(0)" id="mlastina_pesteana" class="bullet"

rel="250-640"> </a>
<div class="popup" id="mlastina_pesteana-box">
<h3>Rezervaia Botanic Mlatina de la Peteana</h3>
<p>Mlatina de la Peteana este o arie protejat de interes
naional care corespunde categoriei a IV-a IUCN (rezervaie natural, de
tip botanic) inclus n Geoparcul Dinozaurilor ara Haegului. Cu o
suprafa de 2 ha, rezervaia se afl pe teritoriul satului Peteana,
comuna Densu, fiind una din cele mai sudice mlatini oligotrofe din
Romnia, n flora creia s-au identificat populaii de Drosera rotundifolia
(Roua cerului - plant carnivor) - un adevrat relict glaciar.</p>
</div>
</div>
<a href="javascript:void(0)" id="furnal_govajdie" class="bullet" rel="255-

435"> </a>
<div class="popup" id="furnal_govajdie-box">
<h3>Furnalul de la Govjdie</h3>
<p>Furnalul de la Govjdia, judeul Hunedoara, se afl n
captul vestic al satului Govjdia, la 20 km de municipiul Hunedoara (10 km
pe terasamentul cii ferate nguste). Furnalul este vestit pentru c aici
s-au produs unele componente din font pentru turnul Eiffel din Paris, i
font pentru oelul produs pentru turnul Eiffel la uzinele din Reia.
Acest furnal la vremea lui a fost primul furnal cu flux continuu din Europa
i al doilea pe plan mondial.</p>
</div>
</div>
Anexa 7 - Pagina deva.html
<a href="javascript:void(0)" id="statuie_decebal" class="bullet" rel="326-

336"> </a>
<div class="popup" id="statuie_decebal-box">
<h3>Statuia lui Decebal</h3>
<p>Statuia ecvestr a lui Decebal este amplasat n faa Casei
de Cultura, n Piaa Victoriei. A fost realizat n anul 1978, fiind opera
sculptorului Ion Jalea. </p>
</div>
</div>
<a href="javascript:void(0)" id="statuie_traian" class="bullet" rel="303-

280"> </a>
<div class="popup" id="statuie_traian-box">
<h3>Statuia lui Traian</h3>
52
<p>Statuia mpratului Traian a fost dezvelit n anul 1999 i
se afl n piaeta de lng Primria Municipiului Deva.</p>
</div>
</div>
Anexa 8 - Pagina hunedoara.html

<a href="javascript:void(0)" id="statuie_ioan_huniad" class="bullet"
rel="379-351"> </a>
<div class="popup" id="statuie_ioan_huniad-box">
<h3>Statuia lui Ioan (Iancu) de Hunedoara</h3>
<p>Ridicat n anul 1998 n centrul unui sens giratoriu din
Centru Civic al Municipiului Hunedoara </p>
</div>
</div>
<a href="javascript:void(0)" id="primaria" class="bullet" rel="248-

441"> </a>
<div class="popup" id="primaria-box">
<h3>Primria Municipiului Hunedoara i Catedrala Ortodox</h3>
<p>Cldirea actual a Primriei Municipiului Hunedoara a fost
construit n 1937 la iniiativa deputatului PNL Constantin Bursan (1887-
1962) cel care a ctitorit de asemenea i Catedrala Ortodox, sfinit n
1947, aflat imediat lng cldirea Primriei.</p>
<p align="center"><a href="galerii/hd1-2.html"
</div>
</div>
Anexa 9 - Pagina cetate_deva.html

<a href="javascript:void(0)" id="cetatea_deva" class="bullet" rel="288-
359"> </a>
<div class="popup" id="cetatea_deva-box">
<h3>Cetatea Deva</h3>
<p>Cetatea romanic a Devei dateaz din anul 1269 i este
situat n Rezervaia Natural dealul Cetii, situat n nordul oraului.
Accesul spre Cetatea Deva se poate realiza att pe jos, pornind din parcul
oraului ( Parcul Cetii ) ct i cu ajutorul telecabinei ce pleac din
piaa de la poalele cetii.</p>
<p align="center"><a href="galerii/dv2-1.html"
53
</div>
</div>
<a href="javascript:void(0)" id="telecabina" class="bullet" rel="450-

354"> </a>
<div class="popup" id="telecabina-box">
<h3>Telecabina spre Cetatea Deva</h3>
<p>Pentru a pune in valoare potentialul turistic al zonei si
pentru a facilita accesul catre Cetatea Devei, in anul 2003 au inceput
lucrarile pentru constuirea unei telecabine pe Dealul Cetatii. Telecabina
este singurul ascensor inclinat din Romania, iar din punct de vedere al
lungimii traseului - 278 metri si a diferentei de nivel - 158 metri este
primul din Europa.</p>
<p align="center"><a href="galerii/dv2-2.html" target="_blanc">Vezi
imagini</a></p>
</div>
</div>
<a href="javascript:void(0)" id="magna_curia" class="bullet" rel="341-

528"> </a>
<div class="popup" id="magna_curia-box">
<h3>Palatul Magna Curia (Muzeul Civilizaiei Dacice i Romane)</h3>
<p>Magna Curia (latin Curtea Mare) sau Castelul Bethlen se
situeaz n municipiul Deva, la poalele dealului cetaii, nspre sud-est,
lng parcul oraului. Este cea mai veche cldire monument istoric ce se
pstreaz n Deva. n anul 1582 cpitanul garnizoanei cetii din Deva,
Francisc Geszty, construiete pe locaia actualului monument o cas. n
1621 Gabriel Bethlen dispune de transformarea radical a construciei
iniiale, rezultnd palatul Magna Curia. Actualmente cldirea adpostete
Muzeul Civilizaiei Dacice i Romane.</p>
</div>
</div>
Anexa 10 - Pagina castel_hunedoara.html

<a href="javascript:void(0)" id="castelul_huniazilor" class="bullet"
rel="332-353"> </a>
<div class="popup" id="castelul_huniazilor-box">
<h3>Castelul Huniazilor (Corvinilor)</h3>
<p>Castelul a fost ridicat n secolul al XV-lea de Ioan de
Hunedoara pe locul unei vechi ntrituri, pe o stnc la picioarele creia
curge prul Zlati. Este o construcie impuntoare, prevzut cu turnuri,
bastioane i un donjon. Acoperiurile sunt nalte i acoperite cu igl
policrom. Castelul a fost restaurat i transformat n muzeu.</p>
</div>
54
</div>
<a href="javascript:void(0)" id="curtea_husarilor" class="bullet"

rel="344-183"> </a>
<div class="popup" id="curtea_husarilor-box">
<h3>Curtea Husarilor</h3>
<p>nainte de a ajunge la castel, se trece printr-un portal
numit Poarta Bethlen ntr-un spaiu protejat cu ziduri. Acest spaiu
ngrdit care se ntinde n faa castelului, este curtea economic a
castelului unde erau locuinele servitorilor, grajdurile, pivniele etc. n
vechime, acest curte se numea Curtea Husarilor.</p>
</div>
</div>
<a href="javascript:void(0)" id="cetate_pamant" class="bullet" rel="80-

680"> </a>
<div class="popup" id="cetate_pamant-box">
<h3>Urmele cetii de pmnt din evul mediu timpuriu</h3>
<p>Se tiu foarte puine lucruri despre cetatea de pmnt de la
Hunedoara, aceasta fiind prea puin cercetat. Cetatea se afl pe dealul
Snpetru, o formaiune natural nalt, situat la sud-vest de castelul
clasic. Dealul are un val de pmnt impresionant care i apr zonele mai
accesibile, dinspre est. Este posibil ca ntreruperea s corespund cu
fosta poart. n rest, pantele abrupte, au oferit unitatea de aprare a
monumentului.</p>
</div>
</div>
Anexa 11 - Pagina gen2.html

<!DOCTYPE html>
<html>
<head>
<title>Galerie</title>


55
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
</head>
<body>
<h1 align="center">Sarmisegetuza Regia</h1>
<img src= "../imagini/gen2/1.jpg" width="600" height="450" />

</div>
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>
Anexa 12 - Pagina dv2-1.html

<!DOCTYPE html>
<html>
<head>
56
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
</head>
<body>
<h1 align="center">Cetatea Deva</h1>

</div>
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>
57
Anexa 13 - Pagina dv2-2.html
<!DOCTYPE html>
<html>
<head>
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
</head>
<body>
<h1 align="center">Telecabina spre Cetatea Deva</h1>

</div>
58
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>
Anexa 14 - Pagina hd1-2.html

<!DOCTYPE html>
<html>
<head>
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
</head>
<body>
<h1 align="center">Primria Municipiului Hunedoara i Catedrala
Otodox</h1>
59
<img src= "../imagini/hd1-2/1.jpg" width="600" height="450" />
</div>
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
</head>
60
<body>
<h1 align="center">Castelul Huniazilor / Corvinilor</h1>

</div>
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
fx: 'fade',
pause: 1,
prev: '#prev',
61
next: '#next'
});
});
</script>
</head>
<body>
<h1 align="center">Curtea Husarilor</h1>

</div>
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
62
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
</script>
</head>
<body>
<h1 align="center">Cetatea de pmnt de la Hunedoara</h1>

</div>
<ul id="nav">
</ul>
</div>
</div>
</body>
</html>
63

Pagina Web Javascript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Pagina Web Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

Cuprins

1.2. Scopul i utilitatea proiectului

2.2.2. Stiluri interne (in-line)

2.2.3. Foi de stil n pagin

2.2.4.Foi de stil externe

2.2.5. Stiluri pentru diferii selectori

2.2.7. Pseudo-clase Legturi

Pseudo-elementele sunt un fel de pseudo-clase, care permit s se

2.3.2. JavaScript Limbaj de scriptare

2.3.5. JavaScript Limbaj orientat pe obiect

jQuery este o librarie de functii JavaScript creata de John Resig.

2.4.2. Includere jQuery

Ca sa lucrati cu jQuery trebuie mai intai sa includeti libraria de

sau, in loc de a avea fisierul cu jQuery pe serverul dv., o metoda

Pentru a putea interactiona cu elementele HTML in pagina,

- Se poate inlocui $() cu jQuery() ; acesta e util ca sa se evite

2.4.3. Selectare elemente HTML in jQuery

Elementele (X)HTML se selecteaza cu jQuery prin adaugarea lor in $

Cand adaugati un selector jQuery in $(), returneaza un obiect jQuery

jQuery poate selecta mai multi selectori intr-o singura declaratie,

Pentru a obtine numarul de elemente selectate se foloseste

Iata alte cateva tipuri de evenimente ce pot fi utilizate in jQuery:

Dac structura directoarelor unui site WEB este ierarhic, aceasta

Dac site-ul are un coninut foarte mare de pagini i fiiere, acestea

3.1.2. Structura site-ului Obiective turistice ale Judetului Hunedoara

Structura site-ului Obiective turistice ale Judetului Hunedoara este

Figura 3.1.2.1. Structura site-ului.

Pagina principal index.html nu este singurul fiier .html care se afl

Figura 3.1.2.4.- Coninutul directorului imagini.

3.2. Componentele site-ului Obiective Turistice ale Judetului

3.2.1. Pagina index.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Stilul paginii i elementele folosite de scripturi sunt importate din

<style type="text/css">@import "css/hartainteractiva.css";</style>

Se import de asemenea i scripturile javascript care asigur

<script type="text/javascript" src="javascript/jquery-

Figura 3.2.1.1. Aspectul iniial al paginii index.html

Aezarea elementelor n pagin se face cu ajutorul unor elemente

Pentru a clarifica aceste afirmaii, vom arta pe scurt cum se

Figura 3.2.1.3. Aspectul paginii index.html Obiectivele turistice ale

Figura 3.2.1.3. Aspectul paginii Obiective turistice ale Judetului

Dac utilizatorul execut click pe Castelul Corvinilor, se deschide o

3.2.2. Paginile .html care afieaz galeriile foto.

Paginile care afieaz galeriile foto sunt asemntoare aa c vor fi

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Stilul paginii i formatarea diferitelor elemente se import din fiierul

<style type="text/css">@import "../css/galerie.css";</style>

Pagina folosete scripturile jquery-1.3.2.min.js i jquery.cycle.all.js,

<script type="text/javascript" src="../javascript/jquery-

De asemenea n toate paginile care conin galerii foto se folosete

<img src= "../imagini/dv2-1/1.jpg" width="600" height="450" />

i un buton de nchidere a paginii.

<div id="inchidere" align="center">

3.2.3. Paginile .html care conin informaiile afiate n ferestrele pop-up

Paginile care conin informaiile afiate n ferestrele pop-up sunt

care lucreaz mpreun cu scriptul zoommap.js pentru a deschide

printr-un element grafic

care va deschide o fereastr pop-up specificat de proprietatea id .

Urmeaz informaiile propriuzise care vor fi afiate n fereastra pop-

i un link de nchidere a ferestrei pop-up.

Aceeai structur se repet pentru fiecare punct de interes marcat

Pot fi adugate un numr limitat de diviziuni cu informaii deoarece

3.2.4. Fiierul hartainteractiv.css

Fiierul hartainteractiv.css este folosit pentru formatarea interfeei