Tutorial HTML

Data publicarii: Februarie 2006

Tutoriale » HTML » Harti de imagini

HTML Feb 2006

Harti de imagini

Hartile de imagini permit declararea unor zone din imagine ca legaturi catre alte pagini web si implica doua aspecte.

Imaginea este declarata ca fiind harta. Pentru aceasta eticheta <img> a imaginii are urmatoarele atribute:
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este folosit un interiorul etichetei <map> prezentate mai jos

Harta se defineste folosind perechea de etichete <map> si <map>, cu atributul obligatoriu name, avand aceeasi valoare ca la usemap din img.
Zona sau zonele continute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:
shape = forma ariei declarate cu valorile: rect=dreptunghiulara, circle=circulara, poly=poligonala, default=alte forme (diferite de cele anterioare)
coords = coordonatele zonei
href = adresa paginii destinatie a legaturii

Originea coordonatelor este coltul stanga sus al imaginii.
Aria rectangulara (rect) se declara prin coordonatele coltului stanga sus si coltul dreapta jos.
Aria circulara (circle) se declara prin coordonatele centrului si raza.
Aria poligonala (poly) se declara prin coordonatele fiecarui colt.

Exemplu: o harta de imagini care contine 5 zone

<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="pag1.html">
<area shape="rect" coords="20,90,120,140" href="pag2.html">
<area shape="circle" coords="200,80,30" href="pag3.html">
<area shape="circle" coords="200,80,60" href="pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="pag3.html">
</map>
</body>
</html>

Exemplu: o harta de imagini care contine 7 zone

<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta1.gif" usemap="#harta1" width="250" height="160" border="0">
<map name="harta1">
<area shape="rect" coords="50,50,90,90" href="pag1.html">
<area shape="circle" coords="70,70,60" href="pag2.html">
<area shape="rect" coords="10,140,240,150" href="pag3.html">
<area shape="poly" coords="140,10,140,130,180,130" href="pag2.html">
<area shape="circle" coords="210,40,20" href="pag1.html">
<area shape="rect" coords="180,10,240,70" href="pag3.html">
<area shape="poly" coords="190,90,240,90,240,130" href="pag2.html">
</map>
</body>
</html>

Sus

Tutoriale
28 May 2016  2:39 PM
Tutoriale

Copyright © 2005-2016 Termeni si conditii
Adauga comentariu
Nume:*
Email:*
Comentariu:*
 Poza 
Introduceti codul:*

Completarea campurilor marcate cu * este obligatorie.

Autorul isi rezerva dreptul de a nu posta comentariile care nu au legatura cu subiectul articolului.

 
Comentarii:
Valent
30-08-2010
Bun seara sau buna dimineata! sunt fr suparat ca nu reusesc sa fac harti de imagini.Imi da un chenar si imi scrie HARTA de IMAGINI si doar atat...ce trb sa fac?Am copiat codul dvs si acelasi rezultat.Am lucrat in NotePad...Nu mai stiu ce sa fac.Multumesc!
Autor
01-09-2010
Trebuie sa faci si harta de imagini
Sand
18-04-2011
imi place mult siteul dvs insa nu prea inteleg ce e cu imaginile in html
Marian
12-03-2013
cum fac imaginea care devine harta de imagini ca nu stiu. Am cautat si n-am gasit nimic
Autor
12-03-2013
Imaginea propriu-zisa (fisierul jpg sau gif) care sta la baza hartii de imagini este creata cu un program de grafica (de exemplu Photoshop)

Sus