new!
|
|
|
 |
| > Script menu déroulant |
[ Posté par lebrabant ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 03-09-2008 à 21:16 | 1 messages ]
Bonjour à tous.
Je me suis basé sur un magnifique script de KevBroke qui permet d'afficher et de cacher des divs. L'ennui, c'Est qui je lui ai apporté une petite modification, et que celle-ci ne fonctionne pas sous IE7. En gros, au lieu des liens comme dans le script original, c'est eun menu déroulant qui gère le tout.
C'est probablement moi qui a fait une ânerie, comme je ne suis pas un expert en la matière.
Voici le code complet de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
<!-- Script créé par KevBrok :wink: -->
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
/* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */
.cachediv {
display: none;
overflow: hidden;
height: 1px;
margin-top: -1px;
position: absolute;
}
</style>
<!-- Script créé par KevBrok :wink: -->
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<form>
<select name="menu" size="1" onchange="navigate(this.form)">
<option value="#" selected="selected" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '1' )"target="_self">Choose your model</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '2' )"target="_self">City Golf</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '3' )"target="_self">City Jetta</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '4' )"target="_self">Rabbit</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '5' )"target="_self">GTI</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '6' )"target="_self">GLI</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '7' )"target="_self">New Beetle</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '8' )"target="_self">New Beetle Convertible</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '9' )"target="_self">Jetta</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '10' )"target="_self">Jetta Wagon</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '11' )"target="_self">Passat</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '12' )"target="_self">Passat Wagon</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '13' )"target="_self">Passat CC</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '14' )"target="_self">Eos</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '15' )"target="_self">Tiguan</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '16' )"target="_self">Routan</option>
<option value="#" onclick="javascript:CacheTout( 'mondiv' );javascript:DivStatus( 'mondiv', '17' )"target="_self">Touareg 2</option>
</select>
</form>
<br />
<div name="mondiv1" id="mondiv1" class="cachediv"></div>
<div name="mondiv2" id="mondiv2" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">City Jetta</div></div>
<div name="mondiv3" id="mondiv3" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">City Golf</div></div>
<div name="mondiv4" id="mondiv4" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Rabbit</div></div>
<div name="mondiv5" id="mondiv5" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">GTI</div></div>
<div name="mondiv6" id="mondiv6" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">GLI</div></div>
<div name="mondiv7" id="mondiv7" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">New Beetle</div></div>
<div name="mondiv8" id="mondiv8" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">New Beetle Convertible</div></div>
<div name="mondiv9" id="mondiv9" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Jetta</div></div>
<div name="mondiv10" id="mondiv10" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Jetta Wagon</div></div>
<div name="mondiv11" id="mondiv11" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Passat</div></div>
<div name="mondiv12" id="mondiv12" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Passat Wagon</div></div>
<div name="mondiv13" id="mondiv13" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Passat CC</div></div>
<div name="mondiv14" id="mondiv14" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Eos</div></div>
<div name="mondiv15" id="mondiv15" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Tiguan</div></div>
<div name="mondiv16" id="mondiv16" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Routan</div></div>
<div name="mondiv17" id="mondiv17" class="cachediv"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Touareg 2</div>
</div>
</body>
</html>
[i][Message édité par lebrabant le 03-09-2008 à 21:17][/i]
________________
Félix Brabant
|
|
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
