fade in/out div

crmpicco · 08-15-2005, 11:27 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hide / Show DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.demo
{
color:#000033;
background-color:#cccccc;
layer-background-color:#cccccc;
position:absolute;
bottom:10px;
width:800px;
height:100px;
visibility:hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>

</head>

<body>
<div ID="demodiv" class="demo">
<table>
<tr>
<td>Rules</td>
</tr>
<tr>
<td>Minimum Stay</td>
<td>1 day</td>
</tr>
<tr>
<td>Maximum Stay</td>
<td>1 year</td>
</tr>
</table>
</div>

<table>
<tr>
<td bgcolor="#006699" onMouseOver="this.bgColor = '#C0C0C0'; this.style.color='#000000';toggleBox('demodiv',1);style.cursor='hand'"
onMouseOut="this.bgColor = '#006699'; this.style.color='#FFFFFF';"><font color="#FFFFFF" face="verdana" size="-2">Show DIV</font></td>
<td bgcolor="#006699" onMouseOver="this.bgColor = '#C0C0C0'; this.style.color='#000000';toggleBox('demodiv',0);style.cursor='hand'"
onMouseOut="this.bgColor = '#006699'; this.style.color='#FFFFFF';"><font color="#FFFFFF" face="verdana" size="-2">Hide DIV</font></td>
</tr>
</table>
</body>
</html>

Is there a way i can modify this code above to Fade In/Out onMouseOver instead of just show/hide?

TIA>

Picco

iota · 08-16-2005, 12:54 PM

fadein - fade out will will work in IE only.
Another replacement : flash or java applet.

meister · 08-20-2005, 10:24 PM

thats not true. It can been done to be cross browser compatible.

Using javascript and CSS one can fade things, it uses the opacity CSS.

I haven't reallly looked at your code. But i think what you may be looking for is:
http://chimpen.com/fadomatic/

Post back once you've fixed the problem and put up the site. I'd like to see how you use it.