当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 网站鼠标变变变!

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 网站鼠标变变变!


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 83 ::
收藏到网摘: n/a

     现在网页的设计都讲究整体统一风格,无论是网页的文字、图像,还是浏览器的滚动条都要求颜色和风格一致。但是很多朋友却对网页上的鼠标不能改变样子而感到苦恼,下面我就介绍两种改变网页上鼠标的方法:

    一、用CSS(Cascading Style Sheets,层叠样式表)的方法

   首先要制作或者寻找一套适合网页风格的鼠标,我使用的鼠标是weste.ani和weste2.ani,在,将两个文件存放到的网站的文件夹ani,然后在你的网页文件的</head></head>之间加上代码:
    <style type="text/css">
    <!--
    body {CURSOR: url('ani/weste.ani')}
    A {CURSOR: url('ani/weste2.ani')
    -->
    </style>
        再次浏览网页的时候你会发现,网页的鼠标显示已经改变了。当鼠标悬停在链接上的时候,显示的weste2.ani样子,时候显示weste.ani。
    原理:其实这种方法利用了CSS2的一个cursor的属性cursor:url (url),鼠标文件可以使用jpg、gif、ani和cur多种文件格式。需要注意的这种方式只能在5.5以上浏览器中正常显示。

    二、利用第三方控件的方法

    这种方法非常简单,只需要讲以下代码加到网页文件的<head></head>之间:
    <script language=javascript>var Loaded=false;var Flag=false;</script>
    <script src='http://files.cometsystems.com/javascript/lc2000.js'
language=javascript></script>
    <script language=javascript>if(Loaded&&Flag)TheCometCursor('cd_electric',0,626);</script>

    修改后,浏览此网页的时候浏览器会弹出一个“安全设置警告”,点击“是”,系统自动安装控件,鼠标就可以按照你的需要显示了。
    那么,如何才能选择你所需要的鼠标样式呢?先登陆网站http://www.cometzone.com,这个网站有14个大类4000多种鼠标,内容十分广泛,鼠标文件制作也很精美,你可以根据需要从类别中选择需要的鼠标,点击相应的鼠标图片就可以预览到不同的效果。
    选中鼠标后,点击网页左边导航的“GET CURSOR CODE”链接,转到,再点击“Select Code”按钮,按钮下这个多行文本框里面的内容就是我上面提供的代码,只是代码中TheCometCursor('cd_electric',0,626)部分不同,显示的鼠标状态也不同。