logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
vissza VISSZA    
menü MENÜ    

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: Chrome logó Firefox logó Safari logó Opera logó IE logó

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:
  1. rect: balfelsősarok-x, balfelsősarok-y, jobbalsósarok-x, jobbalsósarok-y
  2. circle: középont-x, középpont-y, sugár
  3. poly: x1,y1, x2,y2, ... xn,yn

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