JavaScript - An open source scripting language, it allows the creation of dynamic web page content.  Home Web Programming JavaScript Fading Images
rss

Fading Images

Added: Dec 07, 2005 Level: Experienced Software: Dreamweaver FrontPage GoLive  
Author: Ghostbone.com More by this author

Fading ImagesCopy the following code into the HEAD of your script.

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

Copy the following code into the BODY of your HTML document. You need to add the following code in your image <img> tag.

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

As a result, the code should look like the following:

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


Author's URL: Ghostbone.com
JavaScript - An open source scripting language, it allows the creation of dynamic web page content. More JavaScript Tutorials: Featured Materials | Fresh Materials | More JavaScript Tutorials at LearnPHP.org

No comments yet...
Add comments to "Fading Images"

Captcha