Solved

Working with Style filters and image rollover

Posted on 2004-09-02
7
250 Views
Last Modified: 2008-02-26
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>
0
Comment
Question by:Insomniac_PhD
  • 3
  • 2
7 Comments
 
LVL 8

Accepted Solution

by:
_aaron_ earned 250 total points
ID: 11970376
I *think* that this is what ur after:

<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
}
}
}

</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="makevisible(this,1)" src="vipAccess.gif"></a>
0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 250 total points
ID: 11970377
Hi

The best way is to make this style in the head section:

<style type="text/css">

.gray {filter:gray;}

</style>

Then, have the on onmouseover, and onmouseout:

onmouseover="makevisible(this,0);this.className='gray';" onmouseout="makevisible(this,1);this.className='';"

Finally, I recommend you use onmouseover and onmouseout all lowercase. Just a minor points, but it'll validate better for xhtml.

Regards,
Zyloch
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11970379
Oops, sorry aaron

Regards
0
 
LVL 8

Expert Comment

by:_aaron_
ID: 11970385
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>
0
 
LVL 8

Expert Comment

by:_aaron_
ID: 11970390
:)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now