关于热区的一些
来源:互联网 发布:js继承的几种方式比较 编辑:程序博客网 时间:2024/05/22 01:32
关于热区,嗯,最近真的很热,都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类:
Corner appearancy class "iradius" - min=0 max=100 default=0
*Fill opacity class "iopacity" - min=1 max=100 default=33
*Fill color class "icolor" - min=000000 max=ffffff default=000000
Fill appearancy class "nofade"
*Border color class "iborder" - min=000000 max=ffffff default=0000ff
*Border visibility class "noborder"
Coordinates output class "showcoords"
**Group appearancy class "forcegroup"
* These classes work also in conjunction with <area> objects!
** This class works only in conjunction with <area> objects!
- 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)
脚本:
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!
- 关于热区的一些
- 关于热更新的一些分享
- 关于Bugly热更新sdk使用的一些小细节
- 关于Cordova热更新的一些见解(android混合开发)
- 关于ADF的热部署
- 关于热更新的东西
- 关于扩大图片点击热区的问题
- 初识热仿真的一些记录001
- Android 热补丁的一些总结
- 学习热修复的一些基础知识
- 关于Tomcat 6的热部署和热加载
- 关于Tomcat 6的热部署和热加载
- 关于Tomcat 6的热部署和热加载
- 关于Tomcat 6的热部署和热加载
- 关于MYSQL双机热备的心得
- 关于热设计的资料收集
- 关于数据库的冷备份,热备份
- cocos2d-x 关于热更新的文章
- 11个css3做的gallery
- Flex和Java整合
- py2exe error: python25.dll
- qt中配置文件的读取
- 3.1面向对象的概念
- 关于热区的一些
- 关于no office executable found!解决方法
- webservice示例
- Javascript的一些困惑
- TEX介绍
- 跨浏览器实现自定义事件处理
- 序列化与反序列化
- Javascript 中的大括号{}和中括号[]详解
- Flex和Java整合错误 [FaultEvent fault=[RPC Fault faultString="Send failed"