PDA

View Full Version : fade in/out AND colour change/revert



random00
05-14-2006, 12:34 PM
Wow. Apologies in advance for the horrendous length of this. I'm still quite new to js (and haven't played around with any web languages in about 5 years, so just a spot rusty). I've been playing for a good few hours figuring out some script you see below. What i'm trying to do is make a menu which will change colour and opacity on mouseover AND then back on mouseout. In practice what i have below works perfectly adequately IF i don't move my cursor over more than one of my buttons sequentially. For example if i move it over my 'contact' then 'location' directly afterwards. One of the problems in doing this is the 'contact' cell will remain the reddish colour i'm using after fading out. Any tips on making this change back to grey? I've tried using a setInterval to delay it, but it just seems that if i begin to run the mouseover script before the mouseout script has finished running it simply won't work properly. I figure if i can (with some help :)..) fix this it'll probably solve the other problems (you may notice them if you use the code).. Any help would be much appreciated.

PS. using images is out of the question. god knows why, i dont understand it but this is one of the restrictions i have to work to :S sorry for being difficult!

and the horrendous code:


<html>
<head>
<style>
body {background-color:ffffff;background-image:url(menubg.jpg);background-repeat:no-repeat;background-position:100% 0%;margin-top:0;margin-left:0;margin-bottom:0;margin-right:0}
p {margin-left:15px;margin-right:15px;color:ffffff;font-family:arial;}
a {text-decoration:none;color:red}
a.hover {text-decoration:none;color:red}
td {filter:alpha(opacity=40);-moz-opacity:0.40;text-align:center;background-color:b0b0b0;}
td.over {filter:alpha(opacity=100);-moz-opacity:1.0;text-align:center;background-color:bb0000;}
td.title {filter:alpha(opacity=75);-moz-opacity:0.75;text-align:center;background-color:ffffff;}
td.border {background-color:bb0000;height:2px}
td.other {filter:alpha(opacity=30);-moz-opacity:0.75;}
img {border:0;text-align:center;margin-top:7px;margin-left:7px;margin-bottom:0;margin-right:0}
</style>

<script type="text/javascript">

var baseopacity=40

function over(thisobject){
obj=thisobject
obj.className='over'
browserdetect=thisobject.filters? "ie" : typeof thisobject.style.MozOpacity=="string"? "mozilla" : ""
set(baseopacity)
highlight=setInterval("gradualfade(obj)",20)
}

function out(thisobject) {
obj=thisobject
cleartimer();
setTimeout(function() {fadeout(thisobject);}, 20);
}

function set(opacity){
if (browserdetect=="mozilla")
obj.style.MozOpacity=opacity/100
else if (browserdetect=="ie")
obj.filters.alpha.opacity=opacity
}

function cleartimer(){
if (window.highlight) clearInterval(highlight)
}

function gradualfade(occur2){
if (browserdetect=="mozilla" && occur2.style.MozOpacity<1)
occur2.style.MozOpacity=Math.min(parseFloat(occur2.style.MozOpacity)+0.05, 0.99)
else if (browserdetect=="ie" && occur2.filters.alpha.opacity<100)
occur2.filters.alpha.opacity+=5
else if (window.highlight)
clearInterval(highlight)
}

function fadeout(occur3){
occ3=setTimeout(function() {fadeout(occur3);}, 20)
if (browserdetect=="mozilla" && occur3.style.MozOpacity>0.40)
occur3.style.MozOpacity=Math.min(parseFloat(occur3.style.MozOpacity)-0.05)
else if (browserdetect=="ie" && occur3.filters.alpha.opacity>40)
occur3.filters.alpha.opacity=occur3.filters.alpha.opacity-5
if (browserdetect=="mozilla" && occur3.style.MozOpacity<=0.40)
clearTimeout(occ3);obj.className='';
if (browserdetect=="ie" && occur3.filters.alpha.opacity<=40)
clearTimeout(occ3);obj.className='';
}

</script>

</head>
<body>


<table cellpadding=8px cellspacing=0 border=0 width=100% style='margin-bottom:0px'><tr><td class=title>
<img src=logo.gif border=0 align=left>
</td></tr></table>

<table align=center width=100% height=29px cellpadding=0 cellspacing=0 style='margin-top:-1px;'><tr>
<tr><td class=border colspan=6></td></tr>
<td width=3px>&nbsp</td>
<td width=69px onmouseover="over(this);" onmouseout="out(this);" onclick="window.open('home.html','main','none');"><a href="home.html" target=main><p>home</p></a></td>
<td width=89px onmouseover="over(this);" onmouseout="out(this);" onclick="window.open('aboutus.html','main','none');"><a href="aboutus.html" target=main><p>about us</p></a></td>
<td width=84px onmouseover="over(this);" onmouseout="out(this);" onclick="window.open('location.html','main','none');"><a href="location.html" target=main><p>location</p></a></td>
<td width=81px onmouseover="over(this);" onmouseout="out(this);" onclick="window.open('contact.html','main','none');"><a href="contact.html" target=main><p>contact</p></a></td>
<td>&nbsp;</td></tr>
<tr><td class=border colspan=6></td></tr>
</table>

</body>
</html>

Twey
05-14-2006, 12:55 PM
Well, for the opacity part, try using this script (http://www.twey.co.uk/fading/) of mine. The demo uses images, but it will work with table cells too. Implement that, then I'll have a look at the colour-changing.
-moz-opacity is no longer necessary; all modern Mozilla browsers support the W3C opacity property.