当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 利用css里expression来实现界面对象的批量控制

HTML/XHTML教程
ie7打开页面有源文件但页面空白问题的解决方法
firefox支持webdings字体的方法
HTML 相对路径和绝对路径区别分析
ie6 失真问题
关闭IE启用图片工具列
HTML5 Canvas 起步(1) - 基本概念
网页表单元素Input的高级用法11例
漂亮样式表在XHTML+CSS网页制作中的应用
html ReadOnly 和 Enabled 区别
如何正确地在XHTML文档中使用JavaScript和CSS
IE6 为什么最多人使用
给网站添加 favicon的技巧 网址前面的小图标
什么是 WML?
WML 标签汇总
HTML相对路径 上级目录及下级目录的写法
html 自定义标签使用实现方法
Firefox下英文字母不换行的解决方案
HTML 文本转义小窍门
设置IE8使用IE7的样式的代码
HTML 标记一定不要忘记关闭

HTML/XHTML教程 中的 利用css里expression来实现界面对象的批量控制


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

 

    问题说明: 用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="/upload/tech/20091104/20091104155019_1534b76d325a8f591b52d302e7181331.jpg"> 如何实现鼠标经过此图片, 图片的src="/upload/tech/20091104/20091104155019_e744f91c29ec99f0e662c9177946c627.jpg"?
 
 
解决方法: 使用css的expression方法,
具体实现要看看.css的写法:
 
/*替换图片CSS*/
#imgScript {   /*这里使用对象ID来通配样式, 也可以定义一个css函数*/
 star:expression(
    onmouseover = function()
    {
        /*替换图片*/
        if(this.hover != null){
          this.name = this.src;
          this.src = this.src="/upload/tech/20091104/20091104155020_5737c6ec2e0716f3d8a7a5c4e0de0d9a.jpg", '_over.jpg');
          this.HasChg = 1;
       }
   },
   onmouseout = function()
  { 
       /*还原本来的图片*/
     if(this.HasChg != null){
        this.src = this.name;
        this.HasChg = null;
    }
 }
)

}/*end imgScript*/
 
应用样式的img:
<img src="/upload/tech/20091104/20091104155021_d709f38ef758b5066ef31b18039b8ce5.jpg"上看看效果