...

View Full Version : fade in/out div



crmpicco
08-15-2005, 11:27 AM
<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum