图片地图的鼠标形状问题
0
悬赏园豆：20
[已解决问题]
解决于 2013-07-31 23:04
http://news.163.com/photoview/00AP0001/36705.html#p=952LMH3900AP0001看看这个地址，虽然图片有点寒碜，可是做出来的就是好！看到鼠标的变化没，哪位高手能告诉我这是用那种方法做出来的？
最佳答案
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
请问一下如果 上下左右都能变化的该怎么做？？
@曈曈: 原理一样呀，你可以再定义两个样式，cursor-top和cursor-bottom，分别对应上面和下面，
.cursor-top{cursor:url("向上的图标地址"), auto} .cursor-bottom{cursor:url("向下的图标地址"), auto}
@李宝亨: 好像是不可以同时用的！不过也很谢谢你了
@曈曈: 你指的是啥不可以同时用呀？如果同时指定了两个样式，则后者覆盖前者 （没有!important的前提下）~
@李宝亨: 四个方向同时根本没法实现呀，你想想鼠标在角的时候该朝什么方向呢
@曈曈: 呵呵，那应该使用“X”布局了~
@曈曈：除非用个“x"把图像分割了，如果那样的话该怎么实现，有办法没
@曈曈: 其实那就要去用js判断你的鼠标的位置在哪个图片的哪个区域内~
1、获取你的图片的左上角顶点的坐标 top:t 和 left:l ，图片的宽度为w，高度为h，这样你的图片位置就确定了。
2、在鼠标经过图片的hover时间中，获取鼠标当前的坐标 top:T 和 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)
根据鼠标所在区域，就可以制定不同的样式了~
@李宝亨:我已经做出来了，用的是表格，用表格比较简单！我的网址是http://youzhengzhou.xicp.net希望能进去看看，用表格话还是挺合适的对不对？？
@曈曈: 呵呵，我进去看了，没看到图片呢
@李宝亨: 可能是网速问题
