Montrer/Cacher des blocs DIV
Ce script va vous permettre de montrer/cacher des blocs lors d'un clique,
d'un survol etc... Il y a aussi une fonction qui ouvre tous les divs, un autre
qui les ferment tous, et finalement, une qui les inverse (Ouvre ceux qui sont
fermés, ferme ceux qui sont ouverts)...
Il faut créer des divs avec l'attribut id et name (Name n'est pas
oubligatoire mais il permet au script d'être compatible avec les vieux
navigateurs) suivit d'un numéro (préfixe + numéro). Ce
principe sert aux fonctions qui ouvre/ferme/inverse tous les div( change tous
les divs ayant ce préfixe ). par exemple: mondiv1, mondiv2, mondiv3
....
Entre <HEAD> et </HEAD>
<style type="text/css" media="all">
/* Ce style CSS ne dois pas être enlevé, sinon les divs ne se
cacherons pas ... */
.cachediv {
visibility: hidden;
overflow: hidden;
height: 1px;
margin-top: -1px;
position: absolute;
}
</style>
<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>
Entre <BODY> et </BODY>
- <a href="javascript:DivStatus( 'mondiv',
'1' )">Bloc 1</a><br />
- <a href="javascript:DivStatus( 'mondiv', '2' )">Bloc 2</a><br
/>
- <a href="javascript:DivStatus( 'mondiv', '3' )">Bloc 3</a><br
/>
- <a href="javascript:DivStatus( 'mondiv', '4' )">Bloc 4</a><br
/>
- <a href="javascript:MontreTout( 'mondiv' )">Blocs</a><br
/>
- <a href="javascript:CacheTout( 'mondiv' )">Blocs</a><br
/>
- <a href="javascript:InverseTout( 'mondiv' )">Blocs</a><br
/><br />
<div name="mondiv1" id="mondiv1"><div style="border:
1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc
1</div></div>
<div name="mondiv2" id="mondiv2"><div style="border:
1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc
2</div></div>
<div name="mondiv3" id="mondiv3"><div style="border:
1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc
3</div></div>
<div name="mondiv4" id="mondiv4"><div style="border:
1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc
4</div></div>
