PDA
Partners

View Full Version : Tutorial : Fade in images

Fabolous05
June 27th, 2004, 08:50 PM
This script ads a nice effect especially when you need to put affiliates or buttons that may attract attention way from your content. This way it dulls it out a bit so you can focus on other things but is a nice effect anyways.

Just add this into the <head> </head> section


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


then insert

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


anywhere in the <img> and then see what it looks like

Good Luck

example, http://members.shaw.ca/bavraj/fade

don't be afraid to click the button either :)
cdingman
June 27th, 2004, 11:56 PM
Cool effect.

Not sure what use it has but it sure does look cool.


:)
Fabolous05
June 28th, 2004, 12:20 AM
hold on I'll whip up a little web page and show you what effect it has :)
Fabolous05
June 28th, 2004, 12:26 AM
K, check out this,
http://members.shaw.ca/bavraj/
(just some school stuff)

see the way those images aren't overpowering if they're hidden like that however it's a nice effect when you go over it.

these work well for when linking to other sites using those little small rectangle buttons. Say if you have a lot of affiliates and you use those buttons all those images can make your site look busy this way you can calm it down a bit :).
kitty
August 31st, 2005, 08:05 AM
it is good code thx
sofy600
February 27th, 2006, 12:01 PM
I agree with you completely.