关于热区，嗯，最近真的很热，都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!