|
|
域名空间 下载中心 社区论坛 信息公告 my小屋 | |
 |
联系我们 设为首页 加入收藏 |
 |
|
 |
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 网络赚钱 | 网站地图 | 广告服务 | 服务 |
 |
 |
 |
 当前位置：首页>>网页设计>>html/css>>正文 |
新版上线！[旧版] |  |
|||
注:打开慢时请稍等
|
原理：利用css的属性值可动态改变的特点。 思路：定义一个html元素css属性的两种属性值，再用一个事件来触发，一旦事件发生，则改变html元素的属性值，从而达到预期目的。 制作方法： 1、在网页中输入一段文字（图片的说明），用“span”标记把它括起来，并给它加一个css的“id”属性（也就是给这段文字编一个代号，如：“text1”，以便识别）；再插入一张图片，同样也用“span”把它括起来，也给它加一个“id”属性，如：id="image1"； 2、在网页源代码的〈head〉与〈/head〉之间加上下面这段css代码： 〈!-- .style1 { position:absolute; left:210px; top:245px; width:218px; height:169px; z-index:2 } .style2 { position:absolute; left:210px; top:245px; width:218px; height:169px; z-index:1} .style3 { position:absolute; left:183px; top:245px; width:238px; height:159px; z-index:1; filter: alpha(opacity=10, finishopacity=100, style=1, startx=0, starty=0, finishx=50, finishy=50)} .style4 { position:absolute; left:183px; top:245px; width:238px; height:159px; z-index:2} --〉 〈/style〉 上述代码中的“top”、“left”、“width”、“height”的值用于定位文本和图片在网页中位置和范围，这些属性值要根据实际情况修改。“z-index”是决定当前对象所在层的覆盖顺序，改变它的值可使覆盖顺序发生变化。本例就是动态地改变这个属性值来达到预期效果的； 3、在“text1 ”那个“span”中加载css的“.style2”，让那段文本一开始是处于下层的，并再加载一个“onmouseout”触发事件，一旦这个事件发生，将做两件事，一是让“text1”采用css的“.style2”，使文本移到下层；二是让“image1”采用css的“.style4”，让图片移到上层。这样，“text1”及那段文本的代码是这样的： 〈span id="text1" class="style2" onmouseout="document.all.text1.classname='style2'; document.all.image1.classname='style4';"〉〈font color="#0000ff" 〉〈br〉〈br〉这是著名〈br〉 自然风光胜地〈br〉 ——黄山的仙〈br〉 人指路景点，〈br〉 真是一幅巧夺〈br〉 天工的自然佳〈br〉 作。〈/font〉〈/span〉 4、同样在“image1 ”的那个“span”中加载css的“.style4”，让那张图片一开始是处于上层的，并再加载一个“onmouseover”触发事件，一旦这个事件发生，将做两件事，一是让“text1”采用css的“.style1”，把文本移到上层，变得可见；二是让“image1”采用css的“.style3”，让图象移到下层，且增加了一个“alpha”滤镜，使部分图象产生半透明的效果（关于滤镜的用法及作用请参看css滤镜专题的有关文章）。这样，“image1”及那张图片的代码是这样的： 〈span id="image1" class="style4" onmouseover="document.all.text1.classname='style1'; document.all.image1.classname='style3'"〉〈img src="http://www.iyit.net/files/beyondpic/2006-5/5/065509444074895.jpg" width="237" height="169" 〉〈/span〉 上面代码中“img”中的代码在实际制作中将随插入图片的不同而改变。 编辑：黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇：巧用css制作树状目录 下一篇：巧用css制作文字变图象特效 转载请注明来源：www.iyit.net 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
 |
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |  |
| |||||||
易特网络技术