怎样在网页设计中设定一整套自定义的鼠标指针?--博客帮助之家

博客帮助之家

主页

阅读

博客帮助之家

这个博客站点的目的是为了给很多电脑不熟悉的用户提供帮助，如果你在看了这里所描述的内容，自己仍然无法解决；或在使用过程中有不清楚，可以在文章后留言，我们会尽快给你回复，或直接加入我们的技术支持QQ群取得帮助（QQ群号码：33620918），另外也可以加我们的管理员QQ号码取得及时有效的帮助（QQ号码：2399544 或 549747523）欢迎你的加入！

怎样在网页设计中设定一整套自定义的鼠标指针? [::博客帮助之家::]

首先，你需要一个鼠标指针文件，可以通过单击“开始”→点击“查找”→键入“.ani”或“.cur”(不含双引号)，也可以到网上下载你喜欢的指针。注：.ani是动态效果的指针文件；.cur　是静态效果的指针文件。

下面是两种实现个性鼠标的方法。
1.定义所有超链接的指针

把cursor:url(指针文件的路径)加入到超链接的CSS文件中。
如：a {color:#000000; cursor:url(指针文件的路径);}　

2.定义个别链接的指针

把style="cursor:url(指针文件的路径)"放进<a>的容器中。
如：<a href="指定链接地址" style="cursor:url(指针文件的路径)">链接文字</a>

现在保存文件，预览一下你网页的个性鼠标指针吧!

具体点说明，如果你不清楚什么是CSS，可以先了解一下，这个是什么，你可以更清楚怎么使用？为什么这样使用？

上面是方法或原理，下面是具体操作，对CSS或 HTML不熟悉的朋友看清楚了

在<head>与</head>之间插入：
<style type=text/css>
a:hover {cursor:url('**.cur')}
BODY {cursor:url('**.cur')}
</style>

说明：

1、( )号中的为你的图标的路径，后缀名还有**.ico的，和**.ani的．

2、第一个路径是接触链接时的指针。第二个路径是鼠标移动时的指针。

后缀名为**.ico 的为静态
后缀名为**.cur 的为静态
后缀名为**.ani 的为动画

可以使用的资源：

<STYLE type=text/css>A:hover {
CURSOR: url('http://asp.6to23.com/lyby/no1.ani')
}
BODY {
CURSOR: url('http://asp.6to23.com/lyby/no1.ani')
}
</STYLE>

下面是我随便找的，自己试了就知道，既然要个性，就个性到底，自己设计自己的指针吧！~^)^~

具体在本站群落博客管理后台里操作：“模板设置”===》“修改主模板”====》“源代码”。点了这个源码后，添加上述代码到合适位置就可以。当然建议都随便看一下，CSS或HTML你会更清楚为什么要这样放置或使用！很简单的哦！

01 绿色<BODY style='cursor:url(http://images.jojoo.net/gif/mouse.cur)'>
02 花树枝 <BODY style='cursor:url(http://yuhou.net/work/images/xw_answer/liujg_xw_answer_nor.cur)'>
03 小点跟随<BODY style='cursor:url(http://yuhou.net/images/liujg_m030719.ani)'>
04 粉红玫瑰<BODY style='cursor:url(http://yuhou.net/build/images/03.cur)'>
05 钥匙<BODY style='cursor:url(http://asp.7i24.com/yhsjxe/book1/images/c.cur)'>
06 小手<BODY style='cursor:url(http://asp.7i24.com/yhsjxe/book1/images/c2.cur)'>
07 短笔<BODY style='cursor:url(http://asp.7i24.com/yhsjxe/links/01.cur)'>
08 太阳花<BODY style='cursor:url(http://lssm.wx-e.com/images/lssm.ani)'>
09 小色杆<BODY style='cursor:url(http://home.vipcp.net/kukumm/diary1/images/kuru2r.ani)'>
10 绿色样式剪头<BODY style='cursor:url(http://lengku.net//index/mouse.ani)'>
11 银色样式剪头<BODY style='cursor:url(http://nms.voline.net/aspsky/skins/dream/mouse.ani)'>
12 小老鼠<BODY style='cursor:url(http://e.1asphost.com/xiayule/guest7/pic/1.ani)'>
13 有点像猫<BODY style='cursor:url(http://asp2.6to23.com/whslj/lyb/pic/cur.ani)'>
14 美女头像<BODY style='cursor:url(http://e.1asphost.com/xiayule/guest10/pic/cur.ani)'>
15 小红鼠<BODY style='cursor:url(http://e.1asphost.com/xiayule/guest11/pic/cur.ani)'>
16 小粉猪<BODY style='cursor:url(http://e.1asphost.com/xiayule/guest8/pic/cur.ani)'>
17 小美女加小煎头<BODY style='cursor:url(http://e.1asphost.com/xiayule/guest12/pic/cur.ani)'>
18 蝴蝶<BODY style='cursor:url(http://asp2.6to23.com/rlf/gb3/pic/cur.ani)'>
19 小钟点样式<BODY style='cursor:url(http://asp2.6to23.com/peg3/clover3/pic/cur.ani)'>
20 十字<BODY style='cursor:url(http://asp2.6to23.com/peg3/sky/pic/cross.ani)'>
21 样式剪头<BODY style='cursor:url(http://asp2.6to23.com/peg3/sky/pic/cur.ani)'>
22 银杆<BODY style='cursor:url(http://asp2.6to23.com/peg3/sd/pic/cur.cur)'>
23 带头粉红杆<BODY style='cursor:url(http://asp2.6to23.com/peg3/sakura/pic/cur.ani)'>
24 两十字<BODY style='cursor:url(http://www.bluenuo.com/gbbear/pic/cur.ani)'>
25 兔头<BODY style='cursor:url(http://50net.com/book/img2/1.ani)'>
26 螺旋<BODY style='cursor:url(http://50net.com/home/ani5.ani)'>
27 花<BODY style='cursor:url(http://50net.com/forest/1.ico)'>
28 花<BODY style='cursor:url(http://50net.com/forest/2.ico)'>
29 动态小鼠<BODY style='cursor:url(http://www.kulongnvhai.com/free/pic/cur.ani)'>
30 尾动灰色<BODY style='cursor:url(http://fhwep.lwang.net/Images/Wag3dg.ani)'>
31 三角<BODY style='cursor:url(http://fhwep.lwang.net/Images/Wag3dw.ani)'>

最后加一部分，其实网上很多。

弄了很多，希望大家做这些针对代码的操作前，先备份模板啊！

2006-5-14 15:50:31 阅读全文() | 回复(1) | 引用通告() | 编辑

Re:怎样在网页设计中设定一整套自定义的鼠标指针? [::jser(游客)::]

2006-5-14 16:16:18 个人主页 | 引用 | 返回 | 删除

..................................................
博客的精神于写自己某一刻的思想或心动！
..................................................
当然要是你愿意就是拿来做记事本也可以！
..................................................
群落博客将提供全程免费服务！免费注册！
..................................................
欢迎您成为群落博客的成员!使用之前请先看系统帮助>>>>系统帮助
..................................................