关于使用div img canvas map,area打造鼠标移动上去变色的方法

1.使用img与map配合使用,以达到鼠标移上后,有可操作区域的效果(光标变为小手),map的名称=img的usemap (name=map , usemap=#map)

2.map下的area的shape设置为poly多边形,同时设置coords属性,属性中存放可操作区域的围线坐标.

3.设置最外层div,将div背景图设置跟img图一样,同时,设置宽高和 position: relative;

4.将img设置透明透为0(opacity:0),border: 0px none;position:absolute;left:0;top:0;

5.

设置画布,不透明,宽高,与img一致,position:absolute;

6.准备js,在这里,我们与jquery同时应用







北部区域 东部区域 西部区域 南部区域 中部区域

需要下载源码的可以到以下这个地址 http://www.oschina.net/code/snippet_942530_17658

好了,大家这样就可以看到鼠标移上去的时候的效果了

欢迎大家访问我的博客 http://blog.51chudong.com

转载于:https://my.oschina.net/u/942530/blog/104354

你可能感兴趣的:(关于使用div img canvas map,area打造鼠标移动上去变色的方法)