asked on

Working with Style filters and image rollover

Below I have referenced 2 examples. The first dsiplays a slightly transparent image and then shows the full color image on mouseover. I am trying to use the gray filter so that the image is gray and then displays full color on mouseover.

The javascript references opacity which is why I think the gray filter is not working. How can I incorporate the gray filter?

<script language="JavaScript1.2">
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>

<a href="#"><img width=55 style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="image.jpg"></a>

******************************

<a href="#"><img width=55 style="FILTER: Gray" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="image.jpg"></a>

ASKER CERTIFIED SOLUTION

_aaron_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zyloch

Oops, sorry aaron

Regards

_aaron_

This will reset the Gray ( in order to remove Gray, it actually removes the filter!) :

<script language="JavaScript1.2">
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if ( cur.style.filter )
{
if ( cur.style.filter == 'Gray' )
{
cur.style.filter = ''
}
else
{
cur.filters.alpha.opacity=strength*100
}
}

}

function addFilter(cur)
{
cur.style.filter = 'Gray'
}

</script>

<a href="#"><img width=55 style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="vipAccess.gif"></a>

******************************

<a href="#"><img width=55 style="filter: Gray" onMouseover="makevisible(this,0)" onMouseout="addFilter(this)" src="vipAccess.gif"></a>

_aaron_