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

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

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!

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>

• 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!

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!

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

Please read the license before you download mapper.js 2.4

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

• 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

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

The inspiration for the script came from Dmitry Khudorozhkovs Lightmapper.

Please leave any comments at this contact formular.

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.

•   home  
•   developer  
•   laboratory  
•   mapzoom.js
  Supports zoom & pan for pixel & vector data! It's a conceptual combination of ShiftZoom and Mapper. Requires no plugin/extension or any other external resource!
•   shiftzoom.js
  Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages. Requires no plugin/extension or any other external resource!
•   snapfit.js
  Supports jigsaw puzzle functionality! The script allows you to add jigsaw puzzles with individual options to images on your webpages. Requires no plugin/extension or any other external resource!
•   booklet.js
  Simulates an authentic looking album or book presenting photos, images and pictures of all sizes and with any aspect ratio. Includes covering, navigation, information, linking and auto generated visual table of contents. Requires no plugin/extension or any other external resource!
•   tripleb.js
  Simulates the CSS 3 beautifying features border-radius, box-shadow and background-gradient on your webpages. Requires no plugin/extension or any other external resource!
•   loupe.js
  Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage. Requires no plugin/extension but one external resource image!
•   busy.js
  Supports native spinner animations! The library allows you to add/remove loading indicators to the viewport and to block-level elements on your webpages. Requires no plugin/extension or any other external resource!
•   glossy.js
  Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   slided.js
  Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   corner.js
  Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   transm.js
  Supports programmable image transitions! Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. Requires no plugin/extension or any other external resource!
•   gauge.js
  Supports programmable gauges! The script allows you to add gauges (with shading and reflection) to your webpages. Requires no plugin/extension or any other external resource!
•   filmed.js
  Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   edge.js
  Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages. Requires no plugin/extension but zero or more external mask images!
•   sphere.js
  Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages. Requires no plugin/extension or any other external resource!
•   bevel.js
  Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages. Requires no plugin/extension or any other external resource!
•   curl.js
  Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages. Requires no plugin/extension or any other external resource!
•   instant.js
  Simulates an instant picture look including tilt! The script allows you to add individual colors, tiltings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   reflex.js
  Simulates a Cover Flow^™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages. Requires no plugin/extension or any other external resource! *Cover Flow is a trademark of Apple Inc.