|
Myha
Moderator
Inregistrat: acum 18 ani
Postari: 5
|
|
Hărţile de imagini sunt imagini īn care anumite zone, numite zone active, constituie legături hipertext către alte pagini HTML. Cu alte cuvinte, zonele active constituie un substitut mult mai atractiv şi, adeseori, mult mai adecvat, al ancorelor.
Realizarea unei hărţi de imagini presupune parcurgerea următoarelor două etape:
* Definirea imaginii ce va fi utilizată drept hartă. Acest lucru se realizează cu ajutorul etichetei usemap a tagului img. Acesta va primi ca valoare numele hărţii de imagini, ce va fi definită īn cadrul etapei a doua.
ex.: <img src="Poza.jpg" usemap="#Harta" >
* Harta este definită īn interiorul tagului map, prin intermediul atributului name, care specifică denumirea hărţii.
Tot īn interiorul tagului map se definesc zonele active, cu ajutorul tagului area. Acesta are următoarele atribute:
* href precizează adresa paginii ţintă;
* shape precizează forma zonei active, care poate fi:
o dreptunghi (rect) - valoarea implicită;
o cerc (circle);
o poligon (poly);
o default.
* coords precizează coordonatele zonei active, acestea depinzīnd de forma aleasă. Coordonatele se vor separa prin virgulă.
Īn definirea unei zone active se va ţine cont că: suprafaţa unei imagini are ca unitate de măsură pixelul, iar sistemul de coordonate are originea (0, 0) īn colţul din stīnga sus al imaginii, prima coordonată crescīnd pe măsură ce ne deplasăm spre dreapta, cea de-a doua crescīnd pe măsură ce coborīm spre baza imaginii.
Astfel, dacă zona activă are formă de cerc, se vor preciza trei valori: primele două corespunzătoare coordonatelor centrului cercului, iar cea de-a treia corespunzătoare razei acestuia.
ex. : tagul următor va defini o zonă activă īn formă de cerc cu centrul īn punctul (40, 20) al imaginii şi rază 10, zonă activă care va ţinti către pagina alta_pagina.htm:
<area href="alta_pagina.htm" shape="circle" coords="40, 20, 10">
Pentru a defini o zonă activă īn formă de dreptunghi, vor trebui precizate patru coordonate: primele două corespunzătoare colţului stīnga-sus al dreptunghiului şi alte două corespunzătoare colţului dreapta-jos.
ex. : vom defini acum o zonă activă īn formă de dreptunghi cu colţurile īn punctele (0, 0), respectiv (10,10) , zonă activă care va ţinti către pagina pagina2.htm:
<area href="pagina2.htm" shape="rect" coords="0, 0, 10, 10">
Īn cazul unui poligon, coordonatele vor fi perechi de valori corespunzătoare vīrfurilor poligonului, de forma:
coords = x1,y1, x2, y2,...,xn,yn.
* target pagina ţintă poate fi afişată īntr-un cadru. Īn acest caz, atributul target va primi ca valoare numele cadrului īn cauză;
* alt primeste ca valoare un mesaj ce va fi afişat sub săgeata mouse-ului, atunci cīnd aceasta intră deasupra zonei active, mesaj ce de regulă este adresa paginii ţinta
OBS : Dacă două sau mai multe zone active se suprapun, prioritară va fi prima dintre acestea definită īn cadrul tagului map.
Aplicaţie
Să presupunem că dorim să realizăm un site dedicat turismului, īn care ne propunem să prezentăm cīteva mănăstiri din Moldova. Vom creea, cu ajutorul unui editor grafic, o imagine stilizată ce conţine mănăstirile. Apoi vom defini această imagine drept hartă de imagini, īn care efectuarea unui clic cu mouse-ul pe o anumită mănăstire va determina īncărcarea paginii cu descrierea acesteia.
Site-ul va avea patru pagini HTML:
* index.htm va conţine harta de imagini şi va face legătura către paginile de descriere fie prin intermediul zonelor active ale hărţii de imagini, fie prin legăturile hipertext adăugate ca alternativă;
* putna.htm, suceviţa.htm, voroneţ.htm pagini ce conţin descrierea celor trei mănăstiri (cīte o poză şi un text adecvat).
Pagina index.htm- conţine harta de imagini şi face legătura către paginile de descriere ale manastirilor fie prin intermediul zonelor active ale hărţii de imagini, fie prin legăturile hipertext adăugate ca alternativă;
<html>
<head>
<title>Ghid Turistic</title>
</head>
<body>
<h1 align="center">Ghid turistic - Manastirile Moldovei</h1>
<p align="center"><a href="Putna.htm">[Putna]</a><a href="Voronet.htm">[Voronet]</a>
<a href="Sucevita.htm">[Sucevita]</a></p>
<p align="center">
<map name="Harta">
<area href="putna.htm" alt = "Manastirea Putna" shape="rect" coords="2, 5, 81, 65">
<area href="voronet.htm" alt = "Manastirea Voronet" shape="circle" coords="106, 209, 35">
<area href="sucevita.htm" alt = "Manastirea Sucevita" shape="polygon" coords="82, 44, 84, 68, 58, 68, 100, 110, 121, 56, 95, 18">
</map>
<img border="0" src="Moldova.jpg" usemap="#Harta" ></p>
<p align="center"><i>(efectuati un clic pe imaginea manastirii dorite pentru a-i vizita pagina)</i></p>
</body>
</html>
<html>
<head>
<title>Manastirea Voronet</title>
</head>
<body>
<h1 align="center">Manastirea Voronet</h1>
<p align="center"><img border="3" src="imagini/Voronet.jpg" width="100" height="100"></p>
<p align = "justify">Manastirea Voronet a fost construita in trei luni si trei saptamini in cursul anului 1488, din porunca domnitorului Stefan cel Mare, si a fost pictata in exterior in timpul lui Petru Rares.</p>
<p align="center"><a href="index.htm"><i>[acasa]</i></a></p>
</body>
</html>
|
|
