Mapa obrázku - Image map

V HTML a XHTML je obrázková mapa seznam souřadnic vztahujících se ke konkrétnímu obrázku , vytvořený za účelem hypertextového propojení oblastí obrázku na různá místa určení (na rozdíl od běžného odkazu na obrázek, ve kterém celá oblast obrázku odkazuje na jediné místo určení). Například mapa světa může mít každou zemi hypertextový odkaz na další informace o této zemi. Záměrem obrazové mapy je poskytnout snadný způsob propojení různých částí obrázku bez rozdělení obrázku do samostatných obrazových souborů.

Na straně serveru

Obrazové mapy na straně serveru byly poprvé podporovány v Mosaic (webový prohlížeč) verze 1.1. Obrazové mapy na straně serveru umožňují webovému prohlížeči odesílat na server informace o poloze, kde uživatel klikne na obrázek. Díky tomu se server může rozhodovat po pixelech o tom, jaký obsah vrátí jako odpověď (možné metody jsou použití vrstev masky obrázku, databázových dotazů nebo konfiguračních souborů na serveru).

Kód HTML pro tento typ mapy obrázků na straně serveru vyžaduje, aby <img>značka byla uvnitř značky ukotvení <a>...</a>a <img>musí obsahovat ismapatribut.

<a href="/imagemapper"><img src="image.png" ismap /></a>

Když uživatel klikne dovnitř obrázku, prohlížeč připojí souřadnice X a Y (vzhledem k levému hornímu rohu obrázku) ke kotevní adrese URL jako řetězec dotazu a bude mít přístup k výsledné adrese URL (například /imagemapper?3,9).

Pokud prohlížeč nepodporuje, ismappak řetězec dotazu nesmí být přidán na kotevní adresu URL a server by měl odpovídajícím způsobem reagovat (například vrácením navigační stránky pouze s textem).

Na straně klienta

Obrázkové mapy na straně klienta byly zavedeny v HTML 3.2 a nevyžadují, aby byla na serveru provedena speciální logika (jsou plně na straně klienta). Také nevyžadují žádný JavaScript .

Čistý HTML

Mapa klienta na straně klienta v HTML se skládá ze dvou částí:

  1. skutečný obrázek, který je vložen do <img>značky. Značka obrázku musí mít atribut usemap, který názvy imagemap používá pro tento obrázek (na jedné stránce může existovat více imagemap).
  2. <map>Prvek, a uvnitř, že <area>prvky, z nichž každý definuje jeden klikací oblast v obrázkovou. Jsou podobné <a> tagdefinování adresy URL, která by měla být otevřena pro běžný webový odkaz. titleAtribut může být, který může být vyjádřen jako popisek , pokud uživatel plochy pohybuje jejich ukazatel myši přes oblast. Z důvodů přístupnosti webu je často důležité - a v některých případech to může být dokonce zákonný nebo smluvní požadavek - poskytnout altatribut popisující odkaz, který může software čtečky obrazovky přečíst například nevidomým uživatelům.

Tyto <area>prvky mohou být obdélníky ( shape="rect"), polygony ( shape="poly") nebo kruhy ( shape="circle"). Hodnoty tvaru jsou dvojice souřadnic. Každý pár má hodnotu X a Y (zleva/nahoře na obrázku) a odděluje se čárkou.

  • Obdélník: Nastavte čtyři souřadnice: "x1, y1, x2, y2"
  • Polygon: Nastavte libovolný počet souřadnic (násobek dvou): „x1, y1, x2, y2, [...] xn, yn“
  • Kruh: Jedna dvojice souřadnic a další hodnota s poloměrem: „x1, y1, radius“

Následující příklad definuje obdélníkovou oblast ("9,372,66,397"). Když uživatel klikne kamkoli do této oblasti, bude přesměrován na domovskou stránku anglické Wikipedie .

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

CSS

Modernějším přístupem je překrývat odkazy na obrázku pomocí absolutního umístění CSS ; toto však podporuje pouze obdélníkové oblasti, na které lze kliknout. Tato technika CSS může být vhodná pro správné fungování obrazové mapy na iPhonech , kterým se nedaří správně změnit měřítko čistých obrazových map HTML.

Tvorba a použití

An unknown portrait unknown painting prob. The Infant Academy 1782 Boswell - Biographer Dr Johnson - Dictionary writer Sir Joshua Reynolds - Host David Garrick - actor Edmund Burke - statesman Pasqual Paoli - Corsican patriot Charles Burney - music historian servant - poss. Francis Barber Thomas Warton - poet laureate Oliver Goldsmith - writer Use button to enlarge or use hyperlinks
Obrázková mapa příkladu klubu . Kliknutím na osobu na obrázku způsobí, že prohlížeč načte příslušný článek.

Mapy obrázků na straně klienta je možné vytvářet ručně pomocí textového editoru, ale to vyžaduje, aby weboví designéři věděli, jak kódovat HTML a jak vyčíslit souřadnice oblastí, které chtějí umístit nad obrázek. Výsledkem je, že většina ručně mapovaných obrazových map jsou jednoduché polygony.

Protože vytváření obrazových map v textovém editoru vyžaduje mnoho času a úsilí, bylo mnoho aplikací navrženo tak, aby webovým návrhářům umožňovalo vytvářet obrazové mapy rychle a snadno, podobně jako by vytvářely tvary ve vektorovém grafickém editoru . Příklady těchto aplikací jsou Adobe Dreamweaver nebo KImageMapEditor (pro KDE ) a plugin imagemap nalezený v GIMP .

Obrázkové mapy, u nichž není na jejich klikatelných plochách zjevné riziko, vystavují uživatele navigaci tajemným masem . I když ano, nemusí být zřejmé, kam vedou. To lze částečně napravit efekty převrácení.

Obrázky SVG

Protože formát obrázku SVG ( Scalable Vector Graphics ) poskytuje své vlastní mechanismy pro přidávání hypertextových odkazů a dalších, sofistikovanějších forem interaktivity k obrázkům, nejsou při práci s vektorovými obrázky ve formátu SVG obecně nutné tradiční metody mapování obrázků.

Viz také

Reference