关于热区，嗯，最近真的很热，都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_maparea_id current area id e.g. 0 | world_map_112xpos 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 Javascriptcvi_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; //BOOLEANcvi_map.defaultNofade = false; //BOOLEANcvi_map.defaultShowcoords = false; //BOOLEANcvi_map.defaultDelayed = false; //BOOLEANcvi_map.defaultImgsrc = ''; //STR (path&file)cvi_map.defaultMapid = ''; //STR (id) Add map highlighting using Javascriptcvi_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 Javascriptcvi_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 Javascriptcvi_map.remove(image); Highlight through external object events using JavascriptextAreaOver(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 pxstroke-miterlimit e.g. 8 | default 1initialfillcolor e.g. #cccccc | default silverinitialstrokecolor e.g. #808080 | default grayhoverfillcolor e.g. #66ff66 | default limegreenhoverstrokecolor e.g. #00ff00 | default greenbackgroundcolor 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!转载于:https://www.cnblogs.com/Mygirl/archive/2011/06/25/2090314.html
相关资源：CSS自定义图片热区示例