关于热区的一些

 

关于热区，嗯，最近真的很热，都40°了，有点扛不住...

下面这个网址可以看看：http://www.netzgesta.de/mapper/

 用法：

下载mapper.js ，然后将其加到页面中.

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

然后在img标签中加入class="mapper"，如下：

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

一个热区如下：

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

多个热区如下：

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

控制一组热区如下：

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

至此已经可以使用了，下面是更多的介绍：

class类：

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