HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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