Image map: Difference between revisions

Revision as of 16:17, 24 October 2015

Revision as of 16:21, 24 October 2015

Line 13:

If the browser does not support <code>ismap</code> then the [[query string]] must not be added to the anchor [[URL]] and the server should respond appropriately (for example, by returning a text-only navigation page).

==Client-side image map==

'''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]]|accessdate=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 you want (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.

<source lang="html4strict">

<img src="image.png" alt="Website map" usemap="#mapname" />

<map name="mapname">

<area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >

</map>

</source>

===CSS===

A more modern 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.

==Image maps use==