Voilà: une amie m'a passé un code de page d'accueil qui permet de créer plusieurs onglets pour changer l'information de la page d'accueil.
Mon problème c'est que la page ne change que par passage de souris et revient à l'origine lorsque la souris quitte l'onglet...
J'aimerais trouver un moyen de rendre "stable" la page: c'est à dire que quand je passerai ma souris ou cliquerai sur l'onglet, , ma page restera sur la page de l'onglet et ne changera que par clic sur un autre onglet.
Accessoirement j'aimerais que les onglets soient placés au dessus de la "page" qu'ils changent au lieu qu'ils soient à gauche...
Voici le code de base: (je précise l'auteur: Mr H):
- Code:
-
/*---survol---*/
#drh{
background-color:#D1D7DC;
border:2px solid #5493B4;
font-size:12px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
width:550px;
height:160px;
-moz-border-radius : 5px 5px 5px 5px;
-webkit-border-radius : 5px 5px 5px 5px;
}
.drh1{
border:1px solid #5493B4;
background-color:#D1D7DC;
-moz-border-radius : 5px 5px 5px 5px;
-webkit-border-radius : 5px 5px 5px 5px;
width:200px;
margin-bottom:5px;
}
.drh2{
width:200px;
height:50px;
border:0px solid #5493B4;
background-color:#;
-moz-border-radius : 5px 5px 5px 5px;
-webkit-border-radius : 5px 5px 5px 5px;
}
- Code:
-
<html>
<head>
<script type="text/javascript">
function afficher(element){
document.getElementById(element).style.display = "block";
}
function cacher(element){
document.getElementById(element).style.display = "none";
}
</script>
</head>
<body>
<table width="800"><tr><td width="200"><a href="#" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
<input type="button" value="Onglet 1" class="drh1"/>
</a><br>
<a href="#" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
<input type="button" value="Onglet 2" class="drh1" />
</a><br>
<a href="#" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
<input type="button" value="Onglet 3" class="drh1" />
</a><br>
<a href="#" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
<input type="button" value="Crédits" class="drh1" />
</a>
<div></td>
<td width="600" rowspan="2"><div id="drh">
<div id="message2" style="display: none;" >Contenu onglet 2</div>
<div id="message1" style="display: none;" >Contenu onglet 1</div>
<div id="message3" style="display: none;" >Contenu onglet 3</div>
<div id="message4" style="display: none;" >Codage par Dr H pour l'Atelier<br><br>Codage en libre service<br>Merci de ne pas modifier cette partie<br><br></div>
</div>
</div></td></tr>
<td width="200" class="drh2"></td>
</table>
</body>
</html>
Un grand merci d'avance!
Si vous voulez des précisions, je suis à votre disposition