Fading Image - Javascript

By admin on March 9, 2001

You’ve likely seen this on other websites where the images appear to be faded out and when you move your mouse over them their appear normal. This little javascript does just that.

Copy this code into your <head>Head Tags</head> in your HTML document:

Code:

<script language="JavaScript1.2">

 function high(which2){
 theobject=which2
 highlighting=setInterval("highlightit(theobject)",50)
 }
 function low(which2){
 clearInterval(highlighting)
 if (which2.style.MozOpacity)
 which2.style.MozOpacity=0.3
 else if (which2.filters)
 which2.filters.alpha.opacity=30
 }

 function highlightit(cur2){
 if (cur2.style.MozOpacity<1)
 cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
 else if (cur2.filters&&cur2.filters.alpha.opacity<100)
 cur2.filters.alpha.opacity+=10
 else if (window.highlighting)
 clearInterval(highlighting)
 }

 </script>

In the BODY of your document:

You need to add the following code in your image <img> tag(s).

Code (place on one line):

style="filter:alpha(opacity=30);-moz-opacity:0.3"
 onMouseover="high(this)" onMouseout="low(this)"

Here is an example of what your image tag should look like:

Code (place on one line):

<img src="pathtoimage/image.gif"
 border=0 style="filter:alpha(opacity=30);-moz-opacity:0.3"
 onMouseover="high(this)" onMouseout="low(this)">

That’s it!