Editing Image map (section)

==Client-side==
'''Client-side image maps '''were introduced in [[HTML 3.2]], and do not require any special logic to be executed on the server (they are fully client-side). They also do not require any [[JavaScript]].

===Pure HTML===
A client-side imagemap in HTML consists of two parts:
# the actual image, which is embedded with the <code><img></code> tag. The image tag must have an attribute ''usemap,'' which names the imagemap to use for this image (multiple imagemaps may exist on a single page).
# A <code><map></code> element, and inside that, <code><area></code> elements, each of which defines a single clickable area within the imagemap. These are similar to the <code><a> tag</code> defining which [[Uniform Resource Locator|URL]] should be opened for an ordinary web link. A <code>title</code> attribute may be provided, which may be rendered as a [[tooltip]] if a desktop user hovers their mouse pointer over the area. For [[web accessibility]] reasons, it is often important – and in some cases it may even be a legal or contractual requirement – to provide an <code>alt</code> attribute describing the link that [[screen reader]] software can read to, for example, [[Blindness|blind]] users.<ref name='access-ability'>{{cite web|url=http://accessibility.psu.edu/imagemaps|title=Image Maps in HTML|work=AccessAbility|publisher=[[Penn State University]]|access-date=6 October 2013}}</ref>

The <code><area></code> elements can be rectangles (<code>shape="rect"</code>), polygons (<code>shape="poly"</code>) or circles (<code>shape="circle"</code>).
Shape-Values are coordinate-pairs. Every pair has an X and a Y value (from left/top of an image) and is separated with a comma.

* Rectangle: Set four coordinates: "x1,y1,x2,y2"
* Polygon: Set as many coordinates as desired (a multiple of two): "x1,y1,x2,y2, [...] xn,yn"
* Circle: One coordinate-pair and another value with a radius: "x1,y1,radius"

The following example defines a rectangular area ("9,372,66,397"). When a user clicks anywhere inside this area, they are taken to the [[English Wikipedia]]'s home page.
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

===CSS===
A more recent approach is to overlay links on an image using [[CSS]] absolute positioning; however, this only supports rectangular clickable areas. This CSS technique may be suitable for making an image map work properly on [[iPhones]], which can fail to rescale pure HTML image maps correctly.