Sujets similaires

Bonjour ^^
Je vois qu'avec le même tuto certains n'ont plus à "cliquer" sur les onglets, mais passent juste dessus. Pourrais je savoir comment m'y prendre ? Voici le code :

Bonjour~
Il faut simplement remplacer les onclick par des onmouseover dans cette partie-ci:

Code:: <span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">INFOS & CONTEXTE</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">SCENARII & CRÉDITS</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">PARTENAIRES ET TOP SITES</span>

LE code entier serait donc =D

Code:: <!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">
//
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:4px;
margin-right:4px;
padding:4px;
cursor:pointer;
border:5px solid E8DED3;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background:#F4EFEA;
}
.onglet_0
{
border:5px solid E8DED3;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

}
.onglet_1
{
border:5px solid E8DED3;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
padding-bottom:10px;
}
.contenu_onglet
{
border:5px solid E8DED3;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
margin-top:-1px;
padding:10px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>

<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">INFOS & CONTEXTE</span>
<span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');">SCENARII & CRÉDITS</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');">PARTENAIRES ET TOP SITES</span>
</div>

<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi"><h1><br><br>
<div style="margin:auto;text-align:center;width:100%">

<a href="http://eternalhope.1fr1.net/gallery/index.htm">GALERIE</a> | <a href="http://eternalhope.1fr1.net/reglement-contexte-f1/reglement-du-forum-t1.htm">REGLEMENT</a> |
<a href="http://eternalhope.1fr1.net/contexte-annexes-f4/contexte-du-forum-t2.htm">CONTEXTE</a> |
<a href="http://eternalhope.1fr1.net/scenarii-f8/">SCENARII</a> |
<a href="http://eternalhope.1fr1.net/scenarii-f8/celebrites-prises-t13.htm">CELEBRITES PRISES</a> <br>
<a href="http://eternalhope.1fr1.net/contexte-annexes-f4/les-groupes-t15.htm">LES GROUPES</a> |
<a href="http://eternalhope.1fr1.net/les-fiches-de-nos-partenaires-vip-f23/">PARTENAIRES VIP </a>|
<a href="http://eternalhope.1fr1.net/contexte-annexes-f4/credits-du-forum-t14.htm">CREDITS</a><br><br>

<table width="700px" border="0" cellpadding="4" cellspacing="6">
<tr>
<td><div align="justify">Ouverture 07.06.2010<br>
20 lignes mini<br>
<span style="color: DarkRed;">Interdit aux - de 16 Ans</span> <br>
Poster sa fiche sous 1 semaine. <br>
Faire sa fiche sous 10 jours.<br>
Design n°1 by Honey dreaming</div> <br>
<a href="http://eternalhope.1fr1.net/les-montagnes-et-les-collines-f54/intrigue-1-on-peut-pas-tout-prevoir-t195.htm#10187">PREMIERE INTRIGUE</a>

</td>

<td>
<font size="3">LA FOLLE EQUIPE</font><br><br>
<a href="http://eternalhope.1fr1.net/msg.forum?mode=post&u=1" target="_blank">
<img src="http://img18.imageshack.us/img18/1687/kassy.png" class="pix"></a>
<a href="http://eternalhope.1fr1.net/msg.forum?mode=post&u=2" target="_blank">
<img src="http://img59.imageshack.us/img59/1015/jensen1.png" class="pix"></a>

<SPAN style="FONT-FAMILY: georgia"><FONT FACE=GEORGIA; SIZE=13 color="#C4AA8F"><b>Bienvenue sur</b></font><FONT FACE GEORGIA; SIZE=6 color="#F4EFEA"><br><i>Eternal Hope</i></FONT></SPAN></div><div align="justify"><blockquote>Le 1er Juillet 2005 Peter Scarbrow se retrouve à l'hôpital après avoir été victime d'une overdose, il échappe de justesse à la mort. Mine de rien, cet incident change sa vie puisqu'il décide d'aider des jeunes comme lui, brisés par des années de violence, d'abus ou de négligence, des adolescents qui n'ont nulle part où aller, ni personne vers qui se tourner et qui sombrent peu à peu dans les affres de la tristesse, le désespoir, la douleur ou encore le repli vers la solitude, le mutisme. Il crée ce centre, "Hope" situé au cœur de l'épaisse forêt canadienne près de Vancouver. C'est ainsi que les jeunes ont un endroit où aller, où se ressourcer pour obtenir une chance de démarrer une nouvelle vie sur des bases solides et saines, tout en étant encadrés par des règles strictes. </div>
</blockquote>

<a href="http://best-rpg.forumpro.fr" target="_blank"><img src="http://i49.tinypic.com/7310tf.jpg" title="Best RPG, le site de référencement d’RPGs" alt="Best RPG, le site de référencement d’RPGs"></a>
</td>
</tr>
</table></h1>
</div></div>

<div class="contenu_onglet" id="contenu_onglet_qui">
<h1><a href="http://eternalhope.1fr1.net/scenarii-f8/jade-s-scenario-libre-t164.htm" target="_blank">
<img src="http://img10.hostingpics.net/pics/550230fkvn.png" class="pix"></a> <a href="http://eternalhope.1fr1.net/scenarii-f8/les-pv-de-kassandra-t18.htm" target="_blank">
<img src="http://images2.fanpop.com/images/photos/7500000/Josh-josh-duhamel-7567413-100-100.jpg" class="pix"></a> <a href="http://eternalhope.1fr1.net/scenarii-f8/members-of-alexia-s-life-100-100-free-t65.htm#1715" target="_blank">
<img src="
http://images2.fanpop.com/image/photos/12800000/Paul-3-paul-wesley-12881495-100-100.jpg" class="pix"></a>
<br>
<a href="http://eternalhope.1fr1.net/scenarii-f8/members-of-alexia-s-life-100-100-free-t65.htm#1716" target="_blank">
<img src="http://img63.imageshack.us/img63/7969/joshhartnetticon001.png" class="pix"></a>
<a href="http://eternalhope.1fr1.net/scenarii-f8/the-bad-and-the-beautiful-chrisspencer-t31.htm" target="_blank">
<img src="http://images2.fanpop.com/image/photos/11900000/Jared-jared-padalecki-11964427-100-100.jpg" class="pix"></a> <a href="http://eternalhope.1fr1.net/scenarii-f8/alex-scenario-libre-uc-t142.htm" target="_blank">
<img src="http://www.hollow-art.com/files/bases/matt_lanter_022.jpg" class="pix"></a> <a href="http://eternalhope.1fr1.net/scenarii-f8/sookie-s-scenari-emma-w-free-t194.htm#10065" target="_blank">
<img src="http://i46.tinypic.com/n3u91w.png" class="pix"></a>

<br>
<br><br> Contexte Arya & Mary-W & & Pa {Arya} & Css Arya<br>
Toute copie même partielle est formellement INTERDITE.<br>
<a href="http://www.sawen.net/">Sawen.net - Annuaire Forum RPG</a><br>
<br> <a href="http://www.boosterforum.com" target="_blank"><img src="http://www.boosterforum.com/forum_ban/1_90x60.gif" width="90" height="60" alt="Publicité pour ton forum et échange de bannières" /></a> <br>
<a href="http://www.copyscape.com/">
<img src="http://banners.copyscape.com/images/cs-wh-3d-234x16.gif" alt="Page copy protected against web site content infringement by Copyscape" title="Do not copy content from the page. Plagiarism will be detected by Copyscape." width="234" border="0" height="16"></a></h1>

</div></div>

<div class="contenu_onglet" id="contenu_onglet_pourquoi">

<h1>

<table width="500px" border="0" cellpadding="3" cellspacing="3">
<tr>
<td>
<div style="margin:auto;text-align:center;width:100%"> NOS CHOUCHOUS<br><br> <br>

<a href="http://sympathyforthedevil.forumactif.com/" target="_blank">
<img src="http://i40.tinypic.com/24xpesy.png" class="pix"></a> <a href="http://alphacentaurirpg.forumactif.com/forum.htm" target="_blank">
<img src="http://img189.imageshack.us/img189/9766/boutont.jpg" class="pix"></a> <a href="http://aryasworlcreations.forumperso.com/" target="_blank">
<img src="http://s2.e-monsite.com/2010/01/05/07/resize_120_120//lien1.png" class="pix"></a> <a href="http://vampires-kingdom.forumactif.com/forum.htm" target="_blank">
<img src="http://img228.imageshack.us/img228/5610/vkgif2.jpg" class="pix"></a> <a href="http://sss-v-2.1fr1.net/forum.htm]" target="_blank">
<img src="http://img23.xooimage.com/files/4/6/8/bp4-1734ca9.png" class="pix"></a> <a href="http://labriz-luxury.forumactif.org/forum.htm" target="_blank">
<img src="http://www.weplug.com/images_1/e38dc11855ca547aaeb69d79e8263b3120100602173816.png" class="pix"></a><br>
<a href="http://eternalhope.1fr1.net/nos-amis-f21/demande-de-partenariat-t8.htm">Vous </a> || <a href="http://eternalhope.1fr1.net/nos-amis-f21/demande-de-partenariat-t8.htm">Plus</a>
</td><td>
<center> <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=14732"><img src="http://img.root-top.com/topsite/obsession27/banner.gif" border="0" alt="top rpg" title="top rpg"></a> <a href="http://www.root-top.com/topsite/candymiam/in.php?ID=5029"><img src="http://img.root-top.com/topsite/candymiam/banner.gif" border="0" alt="top rpg rentree2009" title="top rpg rentree2009"></a> <a href="http://www.root-top.com/topsite/lilie/in.php?ID=5800"> <img src="http://img.root-top.com/topsite/lilie/banner.gif" border="0" alt="best sites" title="best sites"></a> <a href="http://www.root-top.com/topsite/coop/in.php?ID=2327"><img src="http://img.root-top.com/topsite/coop/banner.gif" border="0" alt="frozen kiwii 039 top site forum rpg" title="frozen kiwii 039 top site forum rpg"></a><br>
<a href="http://www.root-top.com/topsite/cherry23/in.php?ID=4796"><img src="http://img.root-top.com/topsite/cherry23/banner.gif" border="0" alt="top" title="top"></a> <a href="http://www.root-top.com/topsite/odealavie/in.php?ID=367"><img src="http://img.root-top.com/topsite/odealavie/banner.gif" border="0" alt="best rpg" title="best rpg"></a>
<br>
<a href="http://www.root-top.com/topsite/abbyp/in.php?ID=1"><img src="http://i38.tinypic.com/16kwc2v.jpg"></a></center>
</font>
</td>
</tr></h1>
</table>
</div></div>
</div>
</td>

<td>
</h1>

</div></div>
</div>

<script type="text/javascript">
//
</script>
</body>
</html>

PS: De plus, pour les arrondis, il est bien plus simple de ne emttre que

Code:: -moz-border-radius: 10px;

Si les 4 coins sont arrondis de la même façon Wink

de plus, il ne faut pas oublier de penser à nos membres qui utilisent Google Chrome/Safari/Opera et utiliser également

Code:: -webkit-border-radius: 10px;
border-radius: 10px;

Simple astuce comme ça Wink

xD

Alors nickel pour le mode onmousover (merci beaucoup), par contre pas compris pour les arrondis ce que je dois mettre et où xD

Ehm tu sais, là où tu as mit tous tes -moz-border-radius~~ tu mets les arrondis à la place de ça, comme ça en plus d'être moins encombré comme CSS tous les navigateurs sauf IE vont pouvoir voir les arrondis x)

Enfin si j'explique mal je peux toujours te montrer ce que je veux dire ._.

Bonjour,

Problème toujours d'actualité ? Wink

Non merci ^^

Problème de PA

Problème de PA

Sujets similaires

Sujets similaires

Partenaires Or