CVI
mapper.js 2.4 allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).

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.

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".

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".

Congratulations, Mr. President
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 McCain

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).

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. Check the cvi_map_lib.js: example!

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!

Why use Javascript Image Mapper?

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

Download

Please read the license before you download mapper.js 2.4

F.A.Q.

Please read the Frequently Asked Questions before you contact the author.

History


Version 2.4 Version 2.31 Version 2.3 Version 2.21 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

Restrictions

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

Credits

The inspiration for the script came from Dmitry Khudorozhkovs Lightmapper.

Contact

Please leave any comments at this contact formular.

License

mapper.js and maputil.js are distributed under the Netzgestade Non-commercial Software License Agreement. 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.

Other Projects

mapper.netzgesta.de © 2014 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong