Képtérkép (image map) - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Képtérkép (image map)

Képtérképek (image map) beillesztése HTML dokumentumba

Név	Angol eredete	Hatás	Jellemzők
<map>	Map	Képtérkép definíció. Páros címke.	Általános ; Események
<area>	Area	Terület meghatározása és a adott területhez hivatkozás hozzárendelése. Páratlan címke.	Általános ; Események

A következő böngészők támogatják:

A <map> címke használata esetén kötelező a name jellemző megadása. Ennek segítségével kapcsolhatjuk a képtérképet egy állóképhez.

Az <area> címke shape jellemzője megadja a terület alakját. Az alak lehet "rect" (téglalap), "circle" (kör) vagy "poly" (általános sokszög)

Az <area> címke coords jellemzője megadja a geometriai alakzat koordinátáit:

rect: balfelsősarok-x, balfelsősarok-y, jobbalsósarok-x, jobbalsósarok-y
circle: középont-x, középpont-y, sugár
poly: x₁,y₁, x₂,y₂, ... x_n,y_n

Példa:

Forráskód


<h2>Kattintson a kiválasztott alkatrészre:</h2>
<img src="alaplap.jpg" …  usemap="#map_name">
<map name=" map_name">
  <area shape="rect" coords="0,0,82,126" alt="Processzor" href="processzor.htm">
  <area shape="rect" coords="55,65,282,326" alt="Memória" href="memoria.htm">
….
  <area shape="circle" coords="124,58,8" alt="Akkumulátor" href="akku.htm">
</map>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_imagemap_1.html