Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
Shaking Images With Javascript
by Arnab_Ghosh
Creating an Image Gallery
by Igor Lognikov, Editor
Last Modified, Loading Time, Preload your Images
by Kyscorp.com
Image Databasing
by Wilfried Schobeiri
Web Development Tutorials
Rich collection of PHP and MySQL tutorials as well as tutorials on different content management systems.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Web Programming  Home Web Programming JavaScript Fading Images
rss

Fading Images

Author: Ghostbone.com More by this author

Added: Dec 07, 2005 Rating:  Average Rating: 3.13 Votes: 55 Position: 6917 of 13406Average Rating: 3.13 Votes: 55 Position: 6917 of 13406Average Rating: 3.13 Votes: 55 Position: 6917 of 13406Average Rating: 3.13 Votes: 55 Position: 6917 of 13406Average Rating: 3.13 Votes: 55 Position: 6917 of 13406 Level: Experienced Software:  DreamweaverGoLiveFrontPage

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="image.gif" border=0 style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Web Programming  More Web Programming: Most Popular Materials | Fresh Materials | More JavaScript Tutorials at LearnPHP.org
Add comments to "Fading Images"