主题:  DHTML动态图片(webfx,米米饭译)

米米饭

职务:普通成员
等级:1
金币:0.0
发贴:79
注册:2000/10/9 17:44:03
#12001/11/4 9:12:29
这是我知道的最老的动态脚本之一。 它首先在Netscape 3 中介绍.

跨游览器版本

在NN3里 讲了 (锚)标签的 onmouseover 和 onmouseout 事件。也介绍了Image集允许 对IMG 标签的一些处理。 src 属性被读写的可能意味着你可以通过编写脚本改变图片文件。

例子: (在大都数支持 javascript 的浏览器都有效,除IE3外)

代码:
onmouseover="pic1.src='/images/openfoldericon.gif'"
onmouseout="pic1.src='/images/foldericon.gif'">
width="16" height="16" border="0" alt="Back to WebFX">


IE4版本一

IE 4.0 里的页面上的所有元素都能被重新处理,因此,即使在页面下载之後页面仍旧可以发生动态变化。这就可以让 onmouseover 和 onmouseout 从锚移到图像本身。因为元素能通过"this"来调用本身, 所以没有必再给图像命名。

例子: (IE4+,Mozilla 和Opera 5+)

代码:
onmouseover="this.src='/image/openfoldericon.gif'"
onmouseout="this.src='/image/foldericon.gif'">

IE4 版本二

在IE里也有事件冒泡。 一旦鼠标进入图像区域就会引起onmouseover 事件发生。 这个事件冒泡的先到达它的容器 ( 通常是一个段落)直到到达整个文档(document)。当它到达文档(document)这一层的时候 , 我们就能捕获到它! 我们必须看是什么元素引起了 onmouseover ( 因为所有元素只引发一个事件冒泡). 引起事件冒泡的元素就称之为 window.event.srcElement。

浏览器也允许开发者把自己定义的属性加到元素上。 (Navigator不支持这一点,很不幸!) 因此我们就把一个自定义的属性 overSrc 加到一个img标签上。 然后在文档(document)这一层首先检查IMG 标签然後检查overSrc标签 。如果找到就可以改变图像!

例子: ( IE4+)

代码: 只需写一次! 你可以将它放到一个外部的 javascript 文件中!


现在申明了overSrc属性的所有图片都发生了动态的改变



注意! 这种执行的方法是区别大小写的。这一点很好解决,不过可能代码的可读性会差一点, 你就必须以 el.getAttribute 代替所有的 el.overSrc!("oversrc")

IE5 行为 (behavior)版本

首先创建一个脚本文件,over.sct 这个脚本比较简单。代码和上面的是非常相似的。 (在这我将 overSrc换成 overSrc2以区别开来). 然后用样式表设定行为。我是在内联样式表单里但是你最好在文件头里的样式里进行申明。

例子: ( IE5+)

代码:


我已经使它对大小写不敏感了! 看!也不是太难 :-)

附:
//************************************
over.sct
**************************************//








另:
最后一种方法,已经有更完善的方法:HTC

编辑历史:[这消息被米米饭编辑过(编辑时间2001-11-04 09:13:39)]