Mapper.js 2.4 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.

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

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

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

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

Classes

• Initialisation class "mapper"
• vary the appearancy by adding iradius followed by the desired radius as pixel:
  Corner appearancy class "iradius" - min=0 max=100 default=0
• vary the fill by adding iopacity followed by the desired opacity in percent:
  *Fill opacity class "iopacity" - min=1 max=100 default=33
• vary the fill by adding icolor followed by the desired color as hex:
  *Fill color class "icolor" - min=000000 max=ffffff default=000000
• vary the fill appearancy by setting nofade:
  Fill appearancy class "nofade"
• vary the border by adding iborder followed by the desired color as hex:
  *Border color class "iborder" - min=000000 max=ffffff default=0000ff
• vary the border visibility by setting noborder:
  *Border visibility class "noborder"
• get the relative mouse position within the image by setting showcoords:
  Coordinates output class "showcoords"
  
• vary the group appearancy by setting forcegroup:
  **Group appearancy class "forcegroup"
  

  * These classes work also in conjunction with <area> objects!
  ** This class works only in conjunction with <area> objects!

  To work with the constant coordinates stream, define a function named "showCoords(map_name,area_id,xpos,ypos,width,height)" after "mapper.js" was loaded.

  showCoords() options:

  map_name current map name e.g. world_map

  area_id current area id e.g. 0 | world_map_112

  xpos current x position within image e.g. 482 (pixel value)

  ypos current y position within image e.g. 175 (pixel value)

  width current image height e.g. e.g. 800 (pixel value)

  height current image height e.g. 400 (pixel value)

  You can use a predefinded div object named map_name+"_blind" with the class "blind_area" as an overlay for any additional output!

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

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

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

Image with class "mapper noborder iradius16 iopacity50 icolorff0000".

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

Why use Javascript Image Mapper?

• Fast and easy to implement. Just add class="mapper" to the image and you're good to go.
• Don't need to spend time in an image editor creating dozens of images for the same effect.
  
• Works and looks really well. Doesn't require additional resources.
• It's dead easy to change the attributes of the images.
• Free of charge use on non-commercial and private web sites.

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

• Added support for Internet Explorer 9

• IE8 Bugfixing

• Small Bugfixing

• IE8 modifications

• Small Bugfixing
• Extended maputil.js

• Added cvi_map_lib.js with additional features

• Added support for round corners

• Added support for forced group attributes

• Added support for multiple area selections

• Added support for individual area highlighting

• Extended maputil.js
• Extended mapper.js
• Added world map

• Added maputil.js
• Added usa map

• Small Bugfixing
• Added europe map

• Initial Release
• Added germany map

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