|
|
域名空间 下载中心 社区论坛 信息公告 my小屋 | |
 |
联系我们 设为首页 加入收藏 |
 |
|
 |
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 网络赚钱 | 网站地图 | 广告服务 | 服务 |
 |
 |
 |
 当前位置：首页>>网页设计>>html/css>>正文 |
新版上线！[旧版] |  |
|||
注:打开慢时请稍等
|
原理：利用css的属性值可动态改变的特点。 思路：定义一个html元素css属性的两种属性值，再用一个事件来触发，一旦事件发生，则改变html元素的属性值，从而达到预期目的。 制作方法： 1、在网页中输入一段文字，用“span”标记把它括起来，并给它加一个css的“id”属性（也就是给这段文字编一个代号，如：“text1”，以便识别）；再插入一张图片，同样也用“span”把它括起来，也给它加一个“id”属性，如：id="image1"； 2、在网页源代码的〈head〉与〈/head〉之间加上下面这段css代码： 〈style type="text/css"〉 〈!-- .style1 { position:absolute; top: 200px; left:180px; background-color:#ccccff; visibility:hidden} .style2 { position:absolute; top: 200px; left:180px; background-color:#ccccff; } .style3 { position:absolute; top: 190px; left:180px; visibility:hidden} .style4 { position:absolute; top: 190px; left:180px; } --〉 〈/style〉 上述代码中的“top”、“left”的值用于定位文本和图片在网页中位置，“backgroud-color”用于确定文本的背景颜色，这些属性值要根据实际情况修改。visibility是决定当前对象是否显示的css属性，本例就是动态地改变这个属性值来达到效果的； 3、在“text1 ”的那个“span”中加载css的“.style2”，让那段文本一开始是显示的，并再加载一个“onclick”触发事件，一旦这个事件发生，将做两件事，一是让“text1”采用css的“.style1”，把文本隐藏；二是让“image1”采用css的“.style4”，让图象显示。这样，“text1”及那段文本的代码是这样的：〈span id="text1" class="style2" onclick="document.all.text1.classname='style1'; document.all.image1.classname='style4' "〉〈font color="#0000ff"〉鼠标在这段文字上单击，文字消失变为图象。在图象上单击，图象消失，恢复为文字。〈/font〉 〈/span〉 4、同样在“image1 ”的那个“span”中加载css的“.style3”，让那张图片一开始是隐藏的，并再加载一个“onclick”触发事件，一旦这个事件发生，将做两件事，一是让“text1”采用css的“.style2”，把文本显示；二是让“image1”采用css的“.style3”，让图象隐藏。这样，“image1”及那张图片的代码是这样的： 〈span id="image1" class="style3" onclick="document.all.text1.classname='style2';document.all.image1. classname='style3' "〉〈img src="http://www.iyit.net/files/beyondpic/2006-5/5/06550944411787.gif" width="316" height="26"〉〈/span〉 上面代码中“img”中的代码在实际制作中将随插入图片的不同而改变 编辑：黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇：巧用css制作图象特效 下一篇：在 css 中关于字体处理效果的思考 转载请注明来源：www.iyit.net 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
 |
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |  |
| |||||||
易特网络技术