Link-sensitive graphics
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 usemap
specified 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
- Image maps , W3C recommendation, December 24, 1999
HTML 5
- usemap (attribute of img), W3C working draft , May 25, 2011 (English)
- ismap (attribute of img), W3C working draft , May 25, 2011 (English)
- map - image-map definition , W3C working draft, Sep 10. 2017 (english)
- area - image-map hyperlink , W3C working draft , Sep 10th 2017 (english)
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
- Link -sensitive graphics in the SELFHTML wiki
- CSS Image Map Techniques and Tutorials on Design Reviver
- Chapter ImageMap in the GIMP user manual
Scripts:
- Create Imagemap - Create interactive images online at imagemarker.com (German)
- Mapper.js - automatic highlighting of image map regions by JavaScript at netzgesta.de (English)
- Maphighlight.js - jQuery Map Highlight, conversion to 2D canvas element
- MapZoom.js - netzgesta.de
- mapzoom - Collection of Perl scripts and CGI programs for image maps, contains, among other things, a. shp2imagemap.pl for converting shapefiles into imagemaps ( University of Rochester , English)
Individual evidence
- ↑ MediaWiki: Extension: ImageMap
- ↑ imagemap maschek.hu
- ↑ imagemap-generator.dariodomi.de