Solved

Working with Style filters and image rollover

Posted on 2004-09-02
7
255 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

776 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