Hărți de imagini în HTML

Hărți de Imagine HTML

Cu hărțile de imagine HTML, poți crea zone apăsabile pe o imagine.

Hărți de Imagine

Tag-ul <map> definește o hartă de imagine: o imagine cu zone apăsabile. Zonele sunt definite cu unul sau mai multe tag-uri <area>.

Exemplu

O hartă de imagine cu zone apăsabile pentru computer, telefon și cafea.

O pagină cu o hartă de imagine peste workplace.jpg, folosind o hartă numită workmap și trei zone clickabile: un dreptunghi peste computer (computer.htm), un dreptunghi peste telefon (phone.htm) și un cerc peste ceașca de cafea (coffee.htm).

> Ieșire: pagină HTML completă

Prompt

O pagină cu o hartă de imagine peste workplace.jpg, folosind o hartă numită workmap și trei zone clickabile: un dreptunghi peste computer (computer.htm), un dreptunghi peste telefon (phone.htm) și un cerc peste ceașca de cafea (coffee.htm).

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hartă imagine completă</title>
</head>
<body>

<img src="workplace.jpg" alt="Loc de muncă" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Telefon" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cafea" href="coffee.htm">
</map>

</body>
</html>

Cum Funcționează?

Ideea unei hărți de imagine este că poți face lucruri diferite în funcție de unde apeși pe imagine. Pentru a crea una, ai nevoie de o imagine plus ceva HTML care descrie zonele apăsabile.

Imaginea

Imaginea se adaugă cu tag-ul <img>. Singura diferență față de o imagine normală este că adaugi un atribut usemap. Valoarea sa începe cu un # urmat de numele hărții de imagine, ceea ce leagă imaginea de hartă.

Sfat: Poți folosi orice imagine ca hartă de imagine.

Imagine cu usemap

O imagine legată de o hartă cu atributul usemap.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Crearea Hărții de Imagine

Apoi, adaugă un element <map>. Acesta este legat de imagine prin atributul său obligatoriu name, care trebuie să corespundă valorii usemap a imaginii.

Elementul map

Tag-ul de deschidere <map> cu name-ul său.

<map name="workmap">

Zonele

Apoi adaugă zonele apăsabile, fiecare cu un element <area>. Setezi forma: rect pentru un dreptunghi, circle pentru un cerc, poly pentru un poligon, sau default pentru întreaga imagine. Setezi și coordonatele pentru a plasa zona pe imagine.

Shape="rect"

Pentru shape="rect", coordonatele vin în perechi de x (de la stânga) și y (de sus). De exemplu, 34,44 este la 34 de pixeli de la stânga și 44 de sus, iar 270,350 este colțul opus. Împreună formează un dreptunghi apăsabil.

Exemplu

O zonă apăsabilă dreptunghiulară care leagă spre computer.htm.

O pagină cu o hartă de imagine peste workplace.jpg cu o singură zonă dreptunghiulară clickabilă, cu coordonatele 34,44,270,350, care leagă către computer.htm.

> Ieșire: pagină HTML completă

Prompt

O pagină cu o hartă de imagine peste workplace.jpg cu o singură zonă dreptunghiulară clickabilă, cu coordonatele 34,44,270,350, care leagă către computer.htm.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zonă dreptunghiulară</title>
</head>
<body>

<img src="workplace.jpg" alt="Loc de muncă" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34, 44, 270, 350" alt="Computer" href="computer.htm">
</map>

</body>
</html>

Shape="circle"

Pentru shape="circle", dă coordonatele centrului, apoi raza. De exemplu, un centru de 337,300 și o rază de 44 pixeli formează un cerc apăsabil.

Exemplu

O zonă apăsabilă circulară care leagă spre coffee.htm.

O pagină cu o hartă de imagine peste workplace.jpg cu o singură zonă circulară clickabilă centrată la 337,300 cu raza 44, care leagă către coffee.htm.

> Ieșire: pagină HTML completă

Prompt

O pagină cu o hartă de imagine peste workplace.jpg cu o singură zonă circulară clickabilă centrată la 337,300 cu raza 44, care leagă către coffee.htm.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zonă circulară</title>
</head>
<body>

<img src="workplace.jpg" alt="Loc de muncă" usemap="#workmap">

<map name="workmap">
  <area shape="circle" coords="337, 300, 44" alt="Cafea" href="coffee.htm">
</map>

</body>
</html>

Shape="poly"

Pentru shape="poly", dă mai multe perechi de coordonate pentru a forma o formă din linii drepte. Aceasta poate crea orice formă, cum ar fi un croissant, găsind coordonatele x și y pentru toate marginile sale.

Exemplu

O zonă apăsabilă poligonală care urmărește conturul unui croissant.

O pagină cu o hartă de imagine peste o imagine cu un croissant, folosind o zonă clickabilă poligonală care urmărește marginile croissantului, cu link către croissant.htm.

> Ieșire: pagină HTML completă

Prompt

O pagină cu o hartă de imagine peste o imagine cu un croissant, folosind o zonă clickabilă poligonală care urmărește marginile croissantului, cu link către croissant.htm.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zonă poligonală</title>
</head>
<body>

<img src="croissant.jpg" alt="Croissant" usemap="#croissantmap">

<map name="croissantmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>

Hartă de Imagine și JavaScript

O zonă apăsabilă poate rula și o funcție JavaScript. Adaugă un eveniment de click elementului <area> cu atributul onclick.

Exemplu

O zonă care afișează o alertă la apăsare.

O pagină cu o hartă de imagine unde o zonă circulară peste ceașca de cafea execută o funcție JavaScript la clic, care afișează alerta „You clicked the coffee cup!”

> Ieșire: pagină HTML completă

Prompt

O pagină cu o hartă de imagine unde o zonă circulară peste ceașca de cafea execută o funcție JavaScript la clic, care afișează alerta „You clicked the coffee cup!”

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zonă cu JS</title>
</head>
<body>

<img src="workplace.jpg" alt="Loc de muncă" usemap="#workmap">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cafea" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("Ai apăsat pe ceașca de cafea!");
}
</script>

</body>
</html>

Rezumatul Capitolului

Pe scurt: folosește elementul <map> pentru a defini o hartă de imagine, elementul <area> pentru a defini fiecare zonă apăsabilă, și atributul usemap pe elementul <img> pentru a indica spre hartă.

Tag-uri HTML pentru Imagini

Tag-urile legate de imagini sunt: <img> (definește o imagine), <map> (definește o hartă de imagine), <area> (definește o zonă apăsabilă în interiorul unei hărți de imagine), și <picture> (definește un container pentru mai multe resurse de imagine).