ciao
voglio realizzare un effeto di fade per fare apparire sopra ad un div contenitore un altro div con testo specifico, ho trovato i filter di IE che non conoscevo (e nemmeno ora si vede
) ma ho fatto delle prove e non riesco a combinare nulla di buono
posto il codice di esempio ms che magicamente funziona
codice:
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
height:300px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0) ">
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1 </DIV>
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px;
width:240px; height:160px; background: yellowgreen; "> This is DIV #2
</DIV>
</DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>
var bTranState = 0;
function fnToggle() {
oTransContainer.filters[0].Apply();
if (bTranState=='0') {
bTranState = 1;
oDIV2.style.visibility="visible";
oDIV1.style.visibility="hidden";}
else {
bTranState = 0;
oDIV2.style.visibility="hidden";
oDIV1.style.visibility="visible";}
oTransContainer.filters[0].Play();}
</SCRIPT>
ed il mio che nella sostanza dovrebbe essere uguale ma che non funge
codice:
<html>
<head>
<script>
function ToggleDiv(stato)
{
divContainer.filters[0].Apply();
if (stato)
{
divPlayer.style.visibility="visible";
divPlayer2.style.visibility="hidden";
}
else
{
divPlayer.style.visibility="hidden";
divPlayer2.style.visibility="visible";
}
divContainer.filters[0].Play();
}
</script>
<style type="text/css">
.divPlayer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #0099FF;
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.divPlayer2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #0099FF;
visibility: visible;
position: absolute;
top: 0px;
left: 0px;
}
.divContainer {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFDF;
}
</style>
</head>
<body>
<table border=1>
<tr>
<td colspan=3 align=center>header</td>
</tr>
<tr>
<td width=160 height=200>left</td>
<td width=540 colspan=2 valign=top>
<div id="divContainer" width="100%" height="100%" class="divContainer" style="filter: progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0);"> body
mostra
<div id="divPlayer" width="100%" height="100%" class="divPlayer"> questo è il player
nascondi </div>
</div>
<div id="divPlayer2" width="100%" height="100%" class="divPlayer2"> questo è il player 2
nascondi </div>
</div>
</td>
</tr>
<tr>
<td colspan=3>footer</td>
</tr>
</table>
</body>
</html>
mi date 1 dritta? ps: ho già cercato sul forum ma senza trovare