本文介绍了一种仅适用于IE浏览器的方法，通过使用特定的CSS样式和JavaScript函数实现当鼠标悬停在图片上时使其变得更为明显的效果。此方法利用了IE特有的滤镜属性来完成透明度的变化。
style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 220px; BORDER-BOTTOM-STYLE: none" src="http://wujunlove.googlepages.com/imghigh.html" frameborder="0" scrolling="no">关键代码：
<style type="text/css" >
.ComponentImage
{
}
{
cursor:hand;
filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0, FinishOpacity=75, Style=2, Enabled='false');
}
</style>
<
script
>
//
鼠标移上来。高亮度显示
function
Highlight(obj)
{
if (obj.filters.length > 0)
{
obj.filters(0).enabled = 'true';
}
}
function
UnHighlight(obj)
{
if (obj.filters.length > 0)
{
obj.filters(0).enabled = 'false';
}
}
</
script
>
所有代码
<html>
<head>
<title>
test page.
</title>
<style type="text/css" >
.ComponentImage
{}{
cursor:hand;
filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0, FinishOpacity=75, Style=2, Enabled='false');
}
</style>
<script>
//鼠标移上来。高亮度显示
function Highlight(obj)
{
if (obj.filters.length > 0)
{
obj.filters(0).enabled = 'true';
}
}
function UnHighlight(obj)
{
if (obj.filters.length > 0)
{
obj.filters(0).enabled = 'false';
}
}
</script>
</head>
<body>
<img src="http://www.blogjava.net/images/logo.gif" class="ComponentImage" onmouseover="Highlight(this);" onmouseout="UnHighlight(this);" >
<br>
<font color=red>鼠标移上来看看效果</font>
</html>
注:不支持fireFox
<style type="text/css" >.ComponentImage
{}
{ cursor:hand; filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0, FinishOpacity=75, Style=2, Enabled='false');}
</style>
<
script
>
//
鼠标移上来。高亮度显示
function
Highlight(obj)
{ if (obj.filters.length > 0) { obj.filters(0).enabled = 'true'; } }
function
UnHighlight(obj)
{ if (obj.filters.length > 0) { obj.filters(0).enabled = 'false'; } }
</
script
>
所有代码
<html> <head> <title> test page. </title> <style type="text/css" >.ComponentImage{}{ cursor:hand; filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0, FinishOpacity=75, Style=2, Enabled='false');}</style> <script> //鼠标移上来。高亮度显示function Highlight(obj) { if (obj.filters.length > 0) { obj.filters(0).enabled = 'true'; } } function UnHighlight(obj) { if (obj.filters.length > 0) { obj.filters(0).enabled = 'false'; } } </script></head> <body> <img src="http://www.blogjava.net/images/logo.gif" class="ComponentImage" onmouseover="Highlight(this);" onmouseout="UnHighlight(this);" > <br> <font color=red>鼠标移上来看看效果</font></html>
注:不支持fireFox
http://www.cnblogs.com/wujun/archive/2006/11/01/546863.html
扫一扫
3784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
