Titre: masquer les divs au chargement de la page
Posté par: bsketeur le le 10-04-2007 a 16:39:15
bonjour a tous j'ai trouver un petit code pour faire un menu cliquable avec des div le seul problème c'est que le java script et moi ca fait deux.
j'aimerai savoir si il est possible de masquer des div au chargement et n'en laisser qu'une apparante ??????
je vous laisse mon code ( lourd peu etre mais je vien juste de me mettre dessus)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/*
* Montre / Cache un div
*/
function DivStatus( nom, numero )
{
var divID = nom + numero;
if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
{
Pdiv = document.getElementById( divID );
PcH = true;
}
else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
{
Pdiv = document.all[ divID ];
PcH = true;
}
else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
{
Pdiv = document.layers[ divID ];
PcH = true;
}
else
{
PcH = false;
}
if ( PcH )
{
Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
}
}
/*
* Cache tous les divs ayant le même préfixe
*/
function CacheTout( nom )
{
var NumDiv = 1;
if ( document.getElementById ) // Pour les navigateurs récents
{
while ( document.getElementById( nom + NumDiv) )
{
SetDiv = document.getElementById( nom + NumDiv );
if ( SetDiv && SetDiv.className != 'cachediv' )
{
DivStatus( nom, NumDiv );
}
NumDiv++;
}
}
else if ( document.all ) // Pour les veilles versions
{
while ( document.all[ nom + NumDiv ] )
{
SetDiv = document.all[ nom + NumDiv ];
if ( SetDiv && SetDiv.className != 'cachediv' )
{
DivStatus( nom, NumDiv );
}
NumDiv++;
}
}
else if ( document.layers ) // Pour les très veilles versions
{
while ( document.layers[ nom + NumDiv ] )
{
SetDiv = document.layers[ nom + NumDiv ];
if ( SetDiv && SetDiv.className != 'cachediv' )
{
DivStatus( nom, NumDiv );
}
NumDiv++;
}
}
}
/*
* Montre tous les divs ayant le même préfixe
*/
function MontreTout( nom )
{
var NumDiv = 1;
if ( document.getElementById ) // Pour les navigateurs récents
{
while ( document.getElementById( nom + NumDiv) )
{
SetDiv = document.getElementById( nom + NumDiv );
if ( SetDiv && SetDiv.className != '' )
{
DivStatus( nom, NumDiv );
}
NumDiv++;
}
}
else if ( document.all ) // Pour les veilles versions
{
while ( document.all[ nom + NumDiv ] )
{
SetDiv = document.all[ nom + NumDiv ];
if ( SetDiv && SetDiv.className != '' )
{
DivStatus( nom, NumDiv );
}
NumDiv++;
}
}
else if ( document.layers ) // Pour les très veilles versions
{
while ( document.layers[ nom + NumDiv ] )
{
SetDiv = document.layers[ nom + NumDiv ];
if ( SetDiv && SetDiv.className != '' )
{
DivStatus( nom, NumDiv );
}
NumDiv++;
}
}
}
/*
* Inverse les divs: Cache les divs visible et montre le divs cachés :)
*/
function InverseTout( nom )
{
var NumDiv = 1;
if ( document.getElementById ) // Pour les navigateurs récents
{
while ( document.getElementById( nom + NumDiv ) )
{
SetDiv = document.getElementById( nom + NumDiv );
DivStatus( nom, NumDiv );
NumDiv++;
}
}
else if ( document.all ) // Pour les veilles versions
{
while ( document.all[ nom + NumDiv ] )
{
SetDiv = document.all[ nom + NumDiv ];
DivStatus( nom, NumDiv );
NumDiv++;
}
}
else if ( document.layers ) // Pour les très veilles versions
{
while ( document.layers[ nom + NumDiv ] )
{
SetDiv = document.layers[ nom + NumDiv ];
DivStatus( nom, NumDiv );
NumDiv++;
}
}
}
</script>
<style type="text/css">
.cachediv {
visibility: hidden;
overflow: hidden;
height: 1px;
margin-top: -1px;
position: absolute;
}
<!--
.unnamed1 {
background-color: #FFEE99;
cursor: hand;
text-align: left;
font-family:"Comic Sans MS";
font-size:12px;
}
.Style1 {color: #FF9900}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#F0F0F0"></td>
</tr>
</table><br>
<table width="169" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="menu.png" width="169" height="21"></td>
</tr>
</table>
<table width="169" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="Style1" id="club" name="club">
<div onClick="javascript:DivStatus( 'menu', '1' )" style="margin-bottom: 2px; ; cursor: hand; text-align: left; font-family:"Comic Sans MS"; font-size:12px; background-color: #FFEE99;">
Le Club
</div>
</div>
<div name="menu1" id="menu1">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
<a href="club/histo.php">L'Historique</a><br>
<a href="club/bureau.php">Le Bureau</a><br>
<a href="club/spons.php">Les Sponsors</a></div>
</div>
</div>
<div name="equipe" id="equipe">
<div class="unnamed1" onClick="javascript:DivStatus( 'menu', '2' )" style="margin-bottom: 2px; color: #FF9900;">
Les Equipes
</div>
</div>
<div name="menu2" id="menu2">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
<a href="equipe/equipe.php">Les Equipes</a><br>
<a href="resultat.php">Les Résultats</a><br>
<a href="classement.php">Les Classement</a></div>
</div>
</div>
<div name="photo" id="photo">
<div class="unnamed1" onClick="javascript:DivStatus( 'menu', '3' )" style="margin-bottom: 2px; color: #FF9900;">
Les Photos
</div>
</div>
<div name="menu3" id="menu3">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
<a href="photo/photo.php">Les Matchs</a><br>
<a href="photo/soiree.php">Les Soirées</a><br>
</div>
</div>
<div name="discu" id="discu">
<div class="unnamed1" onClick="javascript:DivStatus( 'menu', '4' )" style="margin-bottom: 2px; color: #FF9900;">
Discussion
</div>
</div>
<div name="menu4" id="menu4">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
<a href="forum/index.php">Le forum</a>
</div>
</div></td>
</tr>
</table>
</body>
</html>
|
|
|
Titre: Re:masquer les divs au chargement de la page
Posté par: iowa le le 10-04-2007 a 23:55:44
Code:
<body onLoad="DivStatus( 'menu', '4' )" >
|
|
par exemple |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|