首页 新闻 会员 周边

html改变鼠标形状

0
悬赏园豆：20 [已解决问题] 解决于 2013-07-30 13:45

  请问鼠标在一个图片不同位置时，能改变成不同形状，该怎么写代码？至少在两处映射区  请写详细的代码！

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

一、你可以使用脚本进行控件，在图片的区域内，获取光标的位置，通过位置的判断，使用脚本设置或调用不同的光标形状！
二、你可以就是把图片设置成背景图片，在这个以图片为背景的区域区域内设置不同大小的DIV进行嵌套，每一个DIV在光标放上去以后显示不同的形状，或者就是把一个DIV固定到这个区域内的某一个地方进行设置也行
三、应该还有更好的方法，我也跟踪一下

收获园豆：20
KivenRo | 小虾三级 |园豆：1734 | 2013-07-30 09:57

谢谢你的回答方法是可以！我的图片上有个三角形区，怎么设置这个位置

曈曈 | 园豆：145 (初学一级) | 2013-07-30 13:29

@曈曈: 你的这种需求。可以考虑直接用table，然后每个单元格放图片的一部分~

幻天芒 | 园豆：37175 (高人七级) | 2013-07-30 14:13

你可以把三角形图片作为连接图标，也可把图片中的文字或图标单独取出来设置为连接图标

KivenRo | 园豆：1734 (小虾三级) | 2013-07-31 11:47

@白雲天: 请看看这个http://news.163.com/photoview/00AP0001/36705.html#p=952LMH3900AP0001

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

@曈曈: 怎么，有什么问题吗

KivenRo | 园豆：1734 (小虾三级) | 2013-08-01 09:24

我的网址http://youzhengzhou.xicp.net可以看一下，很感谢！

曈曈 | 园豆：145 (初学一级) | 2013-08-14 22:37
其他回答(3)
0

<span style="cursor:*">文本或其它页面元素</span> 
把 * 换成如下15个效果的一种：
hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。
 
      下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化吧！
hand是手型
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

张伟.... | 园豆：293 (菜鸟二级) | 2013-07-29 17:48

谢谢你的回答，但是在图片的映射区上没有起作用啊，其他地方是可以！

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-07-29 17:59
0

给你个思路。图片热点（HTML的map标记）

幻天芒 | 园豆：37175 (高人七级) | 2013-07-29 20:14

没成，热点区还是没变化！谢谢

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-07-29 21:31

@曈曈: 那就考虑用脚本解决；

其他方案：在上面重叠一个不可见的table，然后对每个td设置下cursor，没尝试过，呵呵~如果嫌脚本麻烦，你可以测试下！

支持(0) 反对(0) 幻天芒 | 园豆：37175 (高人七级) | 2013-07-30 11:39

@幻天芒: 我不知道麻烦不麻烦，我还需要链接，链接的图片还是有同样的热点！能用table实现？

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-07-30 13:21

请看看这个http://news.163.com/photoview/00AP0001/36705.html#p=952LMH3900AP0001  图表法不太好实现，因为链接的还是一个热点地图

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-07-31 21:27

你说的对，只能用表格做，用热点地图ie都不支持！http://youzhengzhou.xicp.net可以看一下，很感谢！

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-08-14 22:33
0

注意浏览器兼容问题

宁静*勤奋 | 园豆：226 (菜鸟二级) | 2013-07-30 11:52

我的是ie8，应该能显示的

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-07-30 13:32

请看看这个http://news.163.com/photoview/00AP0001/36705.html#p=952LMH3900AP0001  图表法不太好实现，因为链接的还是一个热点地图

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-07-31 21:27

你说的对，那个热点地图上鼠标形状ie浏览器真的不支持，只能表格！http://youzhengzhou.xicp.net可以看一下

支持(0) 反对(0) 曈曈 | 园豆：145 (初学一级) | 2013-08-14 22:28
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。