[[oktatas:web:html|< HTML]]

====== ImageMap ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Szerkesztve: 2024  
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Bevezetés =====

Lehetővé teszi egy képen vagy objektumon területek
kijelölését, a területekhez pedig események rendelhetők: 
dokumentum elérése vagy egy program indítása.

Típusok
  * kliensoldali
  * szerveroldali

===== Cél - egyszerű példával =====

Adott egyetlen kép, amelynek egyes részein kattintva, mindig
más weblapot szeretnénk betölteni. 


{{:oktatas:web:html:kepterkep01.png|}}


==== Böngészőben ====

A kiindulási oldal így néz ki:

{{:oktatas:web:html:kepterkep02.png|}}

Erről az oldalról szeretnénk elérni a következő három oldalt:



{{:oktatas:web:html:kepterkep03.png|}}


{{:oktatas:web:html:kepterkep04.png|}}



{{:oktatas:web:html:kepterkep05.png|}}


===== Négyszög megadása =====

Kép beillesztés és kép térkép használata

<code html>
<img src="Névtelen" width="640" height="400"
border="0" usemap="#map" />
<map name="map">
  Ide jönnek a térképek
</map>
</code>



===== Térképek megadása =====

==== Négyszög alakzat meghatározása ====



<code html>
<area shape="rect" coords="62,68,438,291" href="masiklap.html" />
</code>


  coords="x1,y1,x2,y2"
A koordináták:
  * bal felső sarok:
    * x1, y1
    * A példában 62 és 68
  * A jobb alsó sarok
    * x2, y2
    * a bal alsó sarok


==== Kör megadása ====

<code html>
<area shape="circle" coords="458,341,35" href="harmadik.html" />
</code>


  coords="x, y, r"

Az x, y és koordintáa és a sugár.


==== Sokszög megadása ====

<code html>
<area shape="poly"
coords="479,67,581,88,565,179,493,199,476,155"
href="negyedik.html" />
</code>


coords="x1,y1, x2,y2, x3,y3, x4,y4, x5,y5"
===== Linkek =====

  * http://www.w3.org/TR/html401/struct/objects.html#h-13.6