<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
a { text-decoration: none; }!Enlever le soulignement des liens.
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumlink {text-decoration: none;}
a.forumlink:hover {text-decoration: none!important;}
a.topiclink {text-decoration: none; }
a.topiclink:hover {text-decoration: none!important; }
a:hover {
text-transform: uppercase;
letter-spacing: 0px;
}
a {
text-transform: uppercase;
letter-spacing: 2px;
color: white;
}
img {
vertical-align:baseline;
margin-right: 3px;
}
.onglet {
color: white;
display:inline-block;
margin-left:0px;
margin-right:20px;
margin-bottom:10px;
margin-top: 10px;
letter-spacing: 1px;
texte-transform: uppercase;
padding-right:3px;
padding-left:3px;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
-moz-border-radius:15px;
border-radius: 15px;
-webkit-border-radius: 15px;
width: 100px;}
.onglet_0 {
color: white;
border-top: 2px solid black;
border-bottom: 2px solid black;
background-color: #6C3636;
border-bottom:1px solid black;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
.onglet_1 {
color: white;
border-top:2px solid black;
border-bottom:2px solid black;
background-color: #6C3636;
filter:alpha(opacity=70);
-moz-opacity:0.7;opacity: 0.7;
border-bottom:1px solid black;
padding-bottom:4px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
.contenu_onglet {
border:2px solid black;
background-color: #6C3636;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
width: 500px;
color: white;
height: 400px;
}
.scrollbar {
height : 200px;
width: 450px;
overflow: auto;
padding-right: 3px;
color: white;
text-align: justify;
} </style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets"><center>
<span class="onglet_0 onglet" id="onglet_Présentation" onmouseover="javascript:change_onglet('Présentation');">Présentation</span>
<span class="onglet_0 onglet" id="onglet_Staff" onmouseover="javascript:change_onglet('Staff');">Staff</span>
<span class="onglet_0 onglet" id="onglet_Statistique" onmouseover="javascript:change_onglet('Statistique');">Satistique</span></center></div><div class="contenu_onglets" style="width:600px"><div class="contenu_onglet" id="contenu_onglet_Présentation"><center><img src="http://www.hostingpics.net/thumbs/42/11/23/mini_421123helena.jpg">Un Loup disait que l'on l'avait volé :
Un Renard, son voisin, d'assez mauvaise vie,
Pour ce prétendu vol par lui fut appelé.
Devant le Singe il fut plaidé,
Non point par avocats, mais par chaque partie.
Thémis n'avait point travaillé,
De mémoire de Singe, à fait plus embrouillé.
Le Magistrat suait en son lit de Justice.
Après qu'on eut bien contesté,
Répliqué, crié, tempêté,
Le Juge, instruit de leur malice,
Leur dit : Je vous connais de longtemps, mes amis ;
Et tous deux vous paierez l'amende :
Car toi, Loup, tu te plains, quoiqu'on ne t'ait rien pris ;
Et toi, Renard, as pris ce que l'on te demande.
Le Juge prétendait qu'à tort et à travers
On ne saurait manquer condamnant un pervers.</center></div>
<div class="contenu_onglet" id="contenu_onglet_Staff"><center><img src="http://www.hostingpics.net/thumbs/42/11/23/mini_421123helena.jpg">Pseudo, Rang Poste, <a href="http://imaginarium.keuf.net/admin/index.forum?part=modules&sub=html&extended_admin=1&tid=dfb597e317892c4e91ab2bc308ad496b">MP</a></center>
</div>
<div class="contenu_onglet" id="contenu_onglet_Statistique"><center>Pour cette troisième partie il faut que tu fasses ça avec ton TEMPLATE</center></div><br>
</center></div>
</div><br>
</div>
</div>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = 'Présentation';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
Accueil
![[Mushù] Une fiche pub pour moi :D Icon_minitime](https://2img.net/i/fa/subsilver/icon_minitime.gif){kind=icon}
Sam 8 Oct - 10:50
