mapper.js

Mapper.js 2.2 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use "jsgraphics" from Walter Zorn (if installed), else it'll degrade and your visitors won't notice a thing.

Setting Up

Download "mapper.js" and include it into your webpage.

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="mapper.js"></script>

"wz_jsgraphics.js" is copyright by Walter Zorn and not part of the distribution!

Using It

To get the highlighting just add a class="mapper" to an div surrounded image.

<div>
<img src="..." class="mapper" usemap="..." alt="...">
</div>

To get individual area highlightings add one or more classes to the area.

<map>
...
<area shape="poly" class="noborder icolor00ff00" href="#" coords="...">
...
</map>

To get multiple area selections add one or more id's to the areas rel attribute.

<map>
...
<area shape="poly" id="blue" rel="green,red" href="#" coords="...">
<area shape="poly" id="green" rel="red,blue" href="#" coords="...">
<area shape="poly" id="red" rel="green,blue" href="#" coords="...">
...
</map>

To force a group of areas using the attributes of the initial area.

<map>
...
<area shape="rect" id="black" class="icolor000000 forcegroup" rel="green,red,blue" href="#" coords="...">
...
</map>

Classes

Scripting

If you want flexibility, use "cvi_map_lib.js" instead of "mapper.js". You can make your maps respond to user actions.

Set defaults using Javascript
cvi_map.defaultRadius = 0; //INT 0-100 (px radius)
cvi_map.defaultOpacity = 33; //INT 0-100 (% opacity)
cvi_map.defaultBordercolor = '#0000ff'; //STR '#000000'-'#ffffff'
cvi_map.defaultAreacolor = '#000000'; //STR '#000000'-'#ffffff'
cvi_map.defaultNoborder = false; //BOOLEAN
cvi_map.defaultNofade = false; //BOOLEAN
cvi_map.defaultShowcoords = false; //BOOLEAN
cvi_map.defaultDelayed = false; //BOOLEAN
cvi_map.defaultImgsrc = ''; //STR (path&file)
cvi_map.defaultMapid = ''; //STR (id)

Add map highlighting using Javascript
cvi_map.add(image, options);
image should be an div surrounded image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, opacity: value,bordercolor: value, areacolor: value,noborder: value, nofade: value,delayed: value,showcoords: value}
Example:
cvi_map.add(document.getElementById("myimg"), { opacity: 25, areacolor: 'ff0000' });

Modify map highlighting using Javascript
cvi_map.modify(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, opacity: value,bordercolor: value, areacolor: value,noborder: value, nofade: value,delayed: value,showcoords: value, imgsrc: value, mapid: value}
If the imagemap has already an effect but a option value has changed, the effect will be changed accordingly.

Example:
cvi_map.modify(document.getElementById("myimg"), { imgsrc: "images/replace.jpg", mapid: "replace_map" });

Remove highlighting from imagemap using Javascript
cvi_map.remove(image);

Highlight through external object events using Javascript
extAreaOver(image_id, area_id);
extAreaOut(image_id, area_id);

If you need utility functions, use "maputil.js". You can generate SVG files out of Image maps.

makeSVGfromMap()
makeSVGfromMap(map, options);
map should be a map element: document.getElementsByName("myimg")[0]
options (contains zero or more values)
output e.g. true (return svg document) | false (open window with source)
width e.g. 502 (image width as pixel value)
height e.g. 482 (image height as pixel value)
stroke-width e.g. 0.75 | default 0.5 px
stroke-miterlimit e.g. 8 | default 1
initialfillcolor e.g. #cccccc | default silver
initialstrokecolor e.g. #808080 | default gray
hoverfillcolor e.g. #66ff66 | default limegreen
hoverstrokecolor e.g. #00ff00 | default green
backgroundcolor e.g. #ffffff | default null
Example:
<a href="#" onClick="makeSVGfromMap(document.getElementsByName("myimg")[0],false,502,482);">Generate SVG</a>
Note:
makeSVGfromMap() parses the style attribute of <area /> tags for fill and stroke styles to complete the SVG!

scaleMapAreaCoords()
scaleMapAreaCoords(map, nw, nh, sw, sh, options);
map should be a map element: document.getElementsByName("myimg")[0]
nw = width e.g. 800 (natural image width as pixel value)
nh = height e.g. 400 (natural image height as pixel value)
sw = width e.g. 400 (scaled image width as pixel value)
sh = height e.g. 200 (scaled image height as pixel value)
options (contains zero or more values)
arg1 xoff e.g. -2 (horizontal offset as pixel value)
arg2 yoff e.g. -2 (vertical offset as pixel value)
Note:
scaleMapAreaCoords() opens a window with the source!

Demonstration

Image with class "mapper showcoords noborder iopacity50 icolorff0000" (Coordinates output example).
Image reference (public source): http://flatplanet.sourceforge.net/maps/
This SVG was generated from map data via "maputil.js" (part of distribution).
Generate SVG from map data via "maputil.js".

Antarctica Antarctica Antarctica Antarctica Antarctica Antarctica Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada Canada United States of America United States of America United States of America United States of America United States of America United States of America United States of America United States of America United States of America United States of America United States of America Panama Costa Rica Nicagarua Honduras El Salvador Belize Guatemala Mexico Haiti Dominican Republic Puerto Rico Jamaica Cuba Suriname French Guiana Guyana Trinidad and Tobago Venezuela Colombia Equador Peru Bolivia Chile Chile Chile Chile Paraguay Uruguay Argentina Argentina Argentina Brazil Brazil Greenland Greenland Greenland Russia Cyprus Montenegro Albania Macedonia Greece Greece Bulgaria Bosnia Herzegovina Serbia Croatia Croatia Estonia Latvia Lithuania Romania Moldova Ukraine Belarus Hungary Slovakia Slovenia Czech Republic Switzerland Austria Italy Italy Italy Portugal Spain France France Luxembourg Belgum Netherland Poland Ireland Britain Britain Denmark Denmark Denmark Iceland Norway Norway Norway Germany Germany Finland Sweden Gambia Guinea-Bissau Guinea Sierra Leone Liberia Ivory Coast Burkina Faso Ghana Togo Benin Nigeria Equatorial Guinea Gabon Central African Republic Cameroon Congo Zaire Uganda Rwanda Burundi Angola Angola Zambia Malawi Namibia Botswana Zimbabwe Swaziland Kenya Tanzania Mozambique Lesotho South Africa South Africa Western Sahara Mauritania Senegal Mali Niger Chad Madagascar Djibouti Eritrea Somalia Ethiopia Sudan Egypt Libya Tunisia Morocco Algeria Tajikistan Turkmenistan Afghanistan Pakistan Gorgia Azerbaijan Azerbaijan Armenia Iran Turkey Turkey Jordan Israel Lebanon Syria Iraq Kuwait Qatar United Arab Emirates Oman Oman Yemen Saudi Arabia Papua New Guinea Papua New Guinea New Zealand New Zealand Australia Australia Kyrgyzstan Uzbekistan Kasaksthan Mongolia Russia Russia Russia Russia Russia Brunai Taiwan Philippines Philippines Philippines Philippines Philippines Philippines Philippines Philippines Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Indonesia Malaysia Malaysia Thailand Cambodia Laos Vietnam Burma Sri Lanka Bangladesh Buthan Nepal South Korea North Korea Japan Japan Japan Japan China [Free Tibet!] China India

Image with class "mapper" only.
The colored circles uses multiple area selections through rel="id_11,id_21,id_9...".
The blue and red squares forces the corresponding groups to use their attributes by "forcegroup".
This SVG was generated from map data via "maputil.js" (part of distribution).
Generate SVG from map data via "maputil.js".

Connecticut Rhode Island Massachussets Vermont New Hampshire Maine New Jersey New York New York West Virginia Maryland Virginia Maryland Delaware Pennsylvania South Carolina North Carolina Florida Georgia Alabama Mississippi Tennessee Kentucky Ohio Indiana Illinois Michigan Michigan Wisconsin Minnesota Louisiana Arkansas Texas Oklahoma New Mexico Kansas Missouri Iowa Nebraska South Dakota North Dakota Colorado Utah Wyoming Montana Hawaii Hawaii Hawaii Hawaii Hawaii Hawaii Hawaii Nevada California Arizona Alaska Alaska Alaska Idaho Washington Oregon Color #1 Color #2 Color #3 Color #4 Color #5 Color #6 Color #7 Color #8 Color #9 Color #10 Obama Clinton

Image with class "mapper iborder00aa00 icolor00ff00".
All not blue colored country areas with class "noborder icolor808080".
This SVG was generated from map data via "maputil.js" (part of distribution).
Generate SVG from map data via "maputil.js".

Russia Finland Norway Sweden Gotland Ukraine Italy Sardinia Corsica France Spain Majorca Rhodes Greece Crete Germany Lolland Sjaelland Fyn Denmark Croatia BosniaAndHerzegovina Serbia Bulgaria Romania Moldova Montenegro Albania Macedonia Portugal Slovenia Hungary Slovakia CzechRepublic Austria Switzerland Poland Belarus Estonia Saare Hiiu Latvia Lithuania Kaliningrad Netherlands Luxembourgh Belgium Britain IsleOfLewis North Ireland Ireland Iceland

Image with class "mapper noborder iradius16 iopacity50 icolorff0000".

bayern baden-wuerttemberg saarland rheinland-pfalz hessen nordrhein-westfalen sachsen thueringen sachsen-anhalt niedersachsen niedersachsen niedersachsen niedersachsen niedersachsen niedersachsen niedersachsen niedersachsen niedersachsen bremen bremen bremen hamburg mecklenburg-vorpommern mecklenburg-vorpommern mecklenburg-vorpommern schleswig-holstein schleswig-holstein schleswig-holstein schleswig-holstein berlin brandenburg Baden-Wuerttemberg Bavaria Brandenburg Berlin Bremen Hamburg Hesse Mecklenburg-West Pomerania Lower Saxony North Rhine-Westphalia Rhineland-Palatinate Saarland Saxony Saxony-Anhalt Schleswig-Holstein Thuringia

Images used are copyrighted and are used for demonstration only (use the shape data).

Why use Javascript Image Mapper?

In older browsers, the script degrades and your visitors won't notice a thing.

Restrictions

No visible borders with "wz_jsgraphics.js" and Safari < 3.0.

History

Version 2.2 Version 2.0 Version 1.6 Version 1.5 Version 1.4 Version 1.3 Version 1.2 Version 1.1 Version 1.01 Version 1.0

Credits

The inspiration for the script came from Dmitry Khudorozhkovs Lightmapper.

License

Mapper.js and MapUtils.js are distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Images used are copyrighted and are used for demonstration only.

cvi.netzgesta.de  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB