首页 新闻 赞助 找找看

图片地图的鼠标形状问题

0
悬赏园豆:20 [已解决问题] 解决于 2013-07-31 23:04

http://news.163.com/photoview/00AP0001/36705.html#p=952LMH3900AP0001看看这个地址,虽然图片有点寒碜,可是做出来的就是好!看到鼠标的变化没,哪位高手能告诉我这是用那种方法做出来的?

曈曈的主页 曈曈 | 初学一级 | 园豆:145
提问于:2013-07-31 21:22
< >
分享
最佳答案
0

查看源码你会发现,鼠标经过图片区域的左侧和右侧,js会让上面的div会添加相应的css样式: cursor-left 和 cursor-right

鼠标的样式cursor属性就在css样式这里指定的,其中图标可以是自己定制的各种形状~

.cursor-left{cursor:url("http://img2.cache.netease.com/utf8/gallery/img/cursor_left.cur"), auto}

.cursor-right{cursor:url("http://img2.cache.netease.com/utf8/gallery/img/cursor_right.cur"), auto}

.cursor-default{cursor:default}
收获园豆:20
libaoheng | 小虾三级 |园豆:1433 | 2013-07-31 21:27

请问一下如果 上下左右都能变化的该怎么做??

曈曈 | 园豆:145 (初学一级) | 2013-07-31 21:45

@曈曈: 原理一样呀,你可以再定义两个样式,cursor-top和cursor-bottom,分别对应上面和下面,

.cursor-top{cursor:url("向上的图标地址"), auto}

.cursor-bottom{cursor:url("向下的图标地址"), auto}
libaoheng | 园豆:1433 (小虾三级) | 2013-07-31 22:42

@李宝亨: 好像是不可以同时用的!不过也很谢谢你了

曈曈 | 园豆:145 (初学一级) | 2013-07-31 23:04

@曈曈: 你指的是啥不可以同时用呀?如果同时指定了两个样式,则后者覆盖前者 (没有!important的前提下)~ 

libaoheng | 园豆:1433 (小虾三级) | 2013-07-31 23:11

@李宝亨: 四个方向同时根本没法实现呀,你想想鼠标在角的时候该朝什么方向呢

曈曈 | 园豆:145 (初学一级) | 2013-07-31 23:33

@曈曈: 呵呵,那应该使用“X”布局了~

libaoheng | 园豆:1433 (小虾三级) | 2013-07-31 23:40

@曈曈:除非用个“x"把图像分割了,如果那样的话该怎么实现,有办法没

曈曈 | 园豆:145 (初学一级) | 2013-07-31 23:42

@曈曈: 其实那就要去用js判断你的鼠标的位置在哪个图片的哪个区域内~

1、获取你的图片的左上角顶点的坐标 top:t 和 left:l ,图片的宽度为w,高度为h,这样你的图片位置就确定了。

2、在鼠标经过图片的hover时间中,获取鼠标当前的坐标 top:和 left:L

满足l<L<(l+w),t<T<(t+h)

那么上下左右四个区域满足的条件分别为(这里就忽略闭区间了)

上:t<T<(t+ h/2)  

下:(t+ h/2)<T<(t+ h) 

左:l<L<(l+w/2) 

右:(l+w/2)<L<(l+w) 

根据鼠标所在区域,就可以制定不同的样式了~

libaoheng | 园豆:1433 (小虾三级) | 2013-08-01 00:48

@李宝亨:我已经做出来了,用的是表格,用表格比较简单!我的网址是http://youzhengzhou.xicp.net希望能进去看看,用表格话还是挺合适的对不对??

曈曈 | 园豆:145 (初学一级) | 2013-08-14 22:19

@曈曈: 呵呵,我进去看了,没看到图片呢

libaoheng | 园豆:1433 (小虾三级) | 2013-08-14 23:17

@李宝亨: 可能是网速问题

曈曈 | 园豆:145 (初学一级) | 2013-08-16 19:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册