Link-sensitive graphics

from Wikipedia, the free encyclopedia
Example "continents"Nordamerika Südamerika Europa Afrika Asien Australien Antarktis
About this picture

Example "continents"

Link-sensitive graphics ( English image map ) is a term from web design and also relates to multimedia programs . It offers a way of embedding hyperlinks within a graphic . These are implemented with the variable shape = as rectangular ( rect ), round ( circle ) or free ( poly ) buttons that behave like references (anchor links) in the hypertext of an HTML document . As a rule, a changing mouse pointer indicates the buttons that are not visible. Link-sensitive graphics are used in both image and video files.

A common example found on websites are maps in which certain regions lead to the corresponding pages. Another example are often “interactive” advent calendars in winter .

Definition in HTML

One in HTML defined image map consists of a real image with a <img>- day is defined. At the same time, an attribute is usemapspecified for this that refers to the image map.

The image map consists of the <map>tag and the individual <area>tags that represent the actual definitions of the fields that can be clicked on. Similar to the definition of a <a>tag, these define which URL is to be called. The following code indicates that an area ( 9,372,66,397 ), which is defined as a rectangular area, points to the Wikipedia page: 

<img src="bild.jpg" alt="alternativtext" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://de.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

Graphic highlighting can be implemented with CSS or JavaScript .

Definition in Mediawiki

In the popular wiki software Mediawiki there is an extension "Extension: ImageMap", with which image maps are displayed, and a tool with which image maps can be created. 

<imagemap>
Datei:Continents vide couleurs.png|300px|Beispiel „Kontinente“
poly   156 126   274 288   362 340   432 290   676  34   326  26   210  66   [[Nordamerika]]
poly   400 318   366 334   366 388   460 632   490 630   556 400   418 306   [[Südamerika]]
...
</imagemap>

Link-sensitive graphics in videos

Link-sensitive graphics can also be used in digital video files . The producer (or manufacturer) of the video must write a map file (as a pure text file) that contains all the necessary information, such as

  • Type, number and appearance (rectangles, circles, polygons ) of the clickable link-sensitive areas
  • Time intervals during which the areas are active

Applications are, for example, additional information or advertising messages that are actively shown by the viewer.

Pseudo-referral sensitivity in videos

In order to create an effect of referral sensitivity, many video makers resort to tricks on video portals that create a result similar to a real referral sensitive graphic. For example, on YouTube, a comment is embedded in previously created areas of the video, which makes this area "clickable" within the video.

Standards

HTML 4.01

HTML 5

software

  • Adobe Illustrator
  • Adobe Dreamweaver
  • Adobe Fireworks
  • Online Image Map Editor , creation of areas for link-sensitive graphics
  • Imagemap Generator , generation of HTML image maps
  • GIMP : Filter → Web → Image Map, built-in filter for creating and adapting image maps

Web links

Tutorials:

Create interactive images - imagemarker.com

Scripts:

Individual evidence

  1. ↑ MediaWiki: Extension: ImageMap
  2. ↑ imagemap maschek.hu
  3. ↑ imagemap-generator.dariodomi.de