使用 JavaScript 更改图像的不透明度（透明度）

引言

我认为这种技术非常实用且独特——使用 JavaScript 改变图像的不透明度！该技术在 IE4+ 和 NS6+ 中均有效，可用于创建一些有趣的“淡入淡出”效果。让我们开始吧！

在 IE4+ 中，您可以使用 STYLE 属性调整图像的不透明度

<img src="ball.gif" style="filter:alpha(opacity=50)">

我已突出显示主要代码。值为 50 会使此图像变为 50% 不透明（或透明）。您可以使用 0-100 之间的数字，其中 0 会使图像消失。

在 NS6+ 中，所需的代码略有不同

<img src="ball.gif" style="-moz-opacity:0.5">

这里接受的值范围是 0 到 1，其中 0 会使图像消失。

您可能现在会问——如何将上述两种 HTML 结合起来，使不透明度规范在 IE4+ 和 NS6+ 中都能工作？只需定义一个 STYLE 属性，并将两个定义放在其中，用分号分隔。

<img src="ball.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">

使用 JavaScript 动态改变不透明度

这才是真正有趣和有用的地方——使用 JavaScript 改变图像的不透明度值！通过这样做，您可以使图像淡入或淡出，例如。

在 HTML 中定义图像后，更改图像不透明度的 JavaScript 语法是

ImageObj.style.filters.alpha.opacity=90 //IE4 syntax
ImageObj.style.MozOpacity=0.9          //NS6 syntax

因此，例如，这里有一个简单的脚本，当鼠标悬停在图像上和移开时，会为您的图像添加“亮起”效果

<script>

function lightup(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}

</script>

<img src="test.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5" 
onMouseover="lightup(this, 100)" onMouseout="lightup(this, 30)">

如果您想查看更复杂的“亮起”效果，请查看 Dynamic Drive 的 渐变高亮脚本。它基本上使用与我相同的方法，只是不透明度是逐步变化的。