Image map

Last updated

In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Contents

Server-side

Server-side image maps were first supported in Mosaic (web browser) version 1.1. [1] Server-side image maps enable the web browser to send positional information to the server about where the user clicks within an image. This allows the server to make pixel-by-pixel decisions about what content to return in response (possible methods are to use image mask layers, database queries, or configuration files on the server).

The HTML code for this type of server-side image map requires the <img> tag to be inside an anchor tag <a>...</a> and the <img> must include the ismap attribute.

<ahref="/imagemapper"><imgsrc="image.png"ismap/></a>

When the user clicks inside the image the browser will append the X and Y coordinates (relative to the upper-left corner of the image) to the anchor URL as a query string and will access the resulting URL [2] (for example, /imagemapper?3,9).

If the browser does not support ismap 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

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:

  1. the actual image, which is embedded with the <img> 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).
  2. A <map> element, and inside that, <area> elements, each of which defines a single clickable area within the imagemap. These are similar to the <a> tag defining which URL should be opened for an ordinary web link. A title 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 alt attribute describing the link that screen reader software can read to, for example, blind users. [3]

The <area> elements can be rectangles (shape="rect"), polygons (shape="poly") or circles (shape="circle"). 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.

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.

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

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.

Creation and use

Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article. JoshuaReynoldsParty.jpgAn unknown portraitunknown paintingprob. The Infant Academy 1782Boswell - BiographerDr Johnson - Dictionary writerSir Joshua Reynolds - HostDavid Garrick - actorEdmund Burke - statesmanPasqual Paoli - Corsican patriotCharles Burney - music historianservant - poss. Francis BarberThomas Warton - poet laureateOliver Goldsmith - writerUse button to enlarge or use hyperlinks
Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article.

It is possible to create client-side image maps by hand using a text editor, but doing so requires web designers to know how to code HTML as well as how to enumerate the coordinates of the areas they wish to place over the image. As a result, most image maps coded by hand are simple polygons.

Because creating image maps in a text editor requires much time and effort, many applications have been designed to allow web designers to create image maps quickly and easily, much as they would create shapes in a vector graphics editor. Examples of these applications are Adobe's Dreamweaver or KImageMapEditor (for KDE), and the imagemap plugin found in GIMP. The free and open-source office suite LibreOffice also includes a dedicated ImageMap editor. [4]

Image maps which do not make their clickable areas obvious risk subjecting the user to mystery meat navigation. Even when they do, where they lead may not be obvious. This can be partially remedied with rollover effects. [5]

SVG images

Because the Scalable Vector Graphics (SVG) image format provides its own mechanisms for adding hyperlinks [6] and other, more sophisticated forms of interactivity [7] to images, traditional image map techniques are generally not necessary when working with vector images in the SVG format.

See also

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

<span class="mw-page-title-main">Hyperlink</span> Method of referencing visual computer data

In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided to by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is known as anchor text. A software system that is used for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The most commonly used version is HTML 4.01, which became official standard in December 1999. An HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.

Inline linking is the use of a linked object, often an image, on one site by a web page belonging to a second site. One site is said to have an inline link to the other site where the object is located.

Vector Markup Language (VML) is an obsolete XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/IEC 29500 and ECMA-376. According to the specification, VML is a deprecated format included in Office Open XML for legacy reasons only.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

URL redirection, also called URL forwarding, is a World Wide Web technique for making a web page available under more than one URL address. When a web browser attempts to open a URL that has been redirected, a page with a different URL is opened. Similarly, domain redirection or domain forwarding is when all pages in a URL domain are redirected to a different domain, as when wikipedia.com and wikipedia.net are automatically redirected to wikipedia.org.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing.

Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval, using an HTML meta element with the http-equiv parameter set to "refresh" and a content parameter giving the time interval in seconds. It is also possible to instruct the browser to fetch a different URL when the page is refreshed, by including the alternative URL in the content parameter. By setting the refresh time interval to zero, meta refresh can be used as a method of URL redirection.

In computing, Java Web Start is a deprecated framework developed by Sun Microsystems that allows users to start application software for the Java Platform directly from the Internet using a web browser. The technology enables seamless version updating for globally distributed applications and greater control of memory allocation to the Java virtual machine.

Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data. They allow software to process the information reliably by having set classes refer to a specific type of data rather than being arbitrary. Microformats emerged around 2005 and were predominantly designed for use by search engines, web syndication and aggregators such as RSS.

hCalendar is a microformat standard for displaying a semantic (X)HTML representation of iCalendar-format calendar information about an event, on web pages, using HTML classes and rel attributes.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

Cross-site request forgery, also known as one-click attack or session riding and abbreviated as CSRF or XSRF, is a type of malicious exploit of a website or web application where unauthorized commands are submitted from a user that the web application trusts. There are many ways in which a malicious website can transmit such commands; specially-crafted image tags, hidden forms, and JavaScript fetch or XMLHttpRequests, for example, can all work without the user's interaction or even knowledge. Unlike cross-site scripting (XSS), which exploits the trust a user has for a particular site, CSRF exploits the trust that a site has in a user's browser. In a CSRF attack, an innocent end user is tricked by an attacker into submitting a web request that they did not intend. This may cause actions to be performed on the website that can include inadvertent client or server data leakage, change of session state, or manipulation of an end user's account.

References

  1. ↑ "IMG extension for Mosaic 1.1".
  2. ↑ "HTML: The Markup Language (an HTML language reference)".
  3. ↑ "Image Maps in HTML". AccessAbility. Penn State University . Retrieved 6 October 2013.
  4. ↑ "LibreOffice ImageMap editor help".
  5. ↑ Flanders, Vincent (March 1998). Web Pages That Suck: Learn Good Design by Looking at Bad Design . San Francisco: Sybex Inc. ISBN   978-0-7821-2187-2.
  6. ↑ "SVG specification: Linking". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
  7. ↑ "SVG specification: Interactivity". World Wide Web Consortium. 16 August 2011. Retrieved 24 June 2019.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.