changer le contenu d'un menu a onglet
Bonjour
j'ai un menu a onglets en 2 parties. Une pour les onglets (header) et l'autre puor les contenus:
code html:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
|
<div id="menu">
<div id="header">
<div id="onglet1">
<a href="#" onclick="javascript:maFonction('onglet1')">onglet1</a>
</div>
<div id="onglet2">
<a href="#" onclick="javascript:maFonction('onglet2')">onglet2</a>
</div>
<div id="onglet3">
<a href="#" onclick="javascript:maFonction('onglet3')">onglet3</a>
</div>
<div class="clearer">
</div>
<div id="containermenu">
<div class="div1">
<ul class="navmenu">
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
</ul>
</div>
<div class="linie2"></div>
<div class="div1">
<ul class="navmenu">
<li><a href="#">lien5</a></li>
<li><a href="#">lien6</a></li>
<li><a href="#">lien7</a></li>
<li><a href="#">lein8</a></li>
</ul>
</div>
<div class="linie2"></div>
<div class="div1">
<ul class="navmenu">
<li><a href="#">lien9</a></li>
<li><a href="#">lien10</a></li>
<li><a href="#">lien11</a></li>
<li><a href="#">lien12</a></li>
</ul>
</div>
<div class="linie2"></div>
<div id="divbtn">
<div id="button1">
<a href="#" id="button1text">voir tout</a>
</div>
<div class="clearer"></div>
</div>
</div>
</div> |
code CSS:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
|
#menu{
width:590px;
height:117px;
}
#header{
float: left;
width:590px;
height: 26px;
font-family:arial;
font-size:12px;
color:#666666;
font-weight:bold;
}
#onglet1{
display:inline;
float: left;
width:190px;
height: 21px;
padding:5px 5px 0px 0px;
text-align:center;
cursor:pointer;
background:url(./image/onglet_active.gif);
}
#onglet2{
display:inline;
float: left;
width:190px;
height: 21px;
padding:5px 5px 0px 5px;
text-align:center;
cursor:pointer;
background-image:url(./image/onglet2_inactive.gif);
}
#onglet3{
display:inline;
float: left;
width:190px;
height: 21px;
padding:5px 0px 0px 5px;
text-align:center;
cursor:pointer;
background-image:url(./image/onglet3_inactive.gif);
}
#onglet1 a, #onglet2 a,#onglet3 a{
display: block;
font-family:arial;
font-size:12px;
color:#666666;
font-weight:bold;
text-decoration:none;
height: 21px;
}
#containermenu{
float: left;
width:588px;
height: 89px;
border-left: #CCCCCC solid 1px;
border-right: #CCCCCC solid 1px;
border-bottom: #CCCCCC solid 1px;
background-color:#F9FCE7;
}
#divbtn{
display:inline;
width:115px;
height:90px;
}
#button1{
float:right;
width:67px;
height:25px;
padding-right:26px;
margin-top:39px;
text-align:center;
background:transparent url(./image/bouton1.jpg) no-repeat;
}
#button1text{
float:right;
width:67px;
height:25px;
margin-top:5px;
font-family:arial;
font-size:11px;
text-align:center;
color:#494949;
text-decoration:none;
}
.navmenu{
float:left;
width:128px;
height:80px;
list-style-type:square;
color:#A8B909;
margin:0;
padding-left:25px;
padding-top:10px;
}
.navmenu li{
font-size:10px;
line-height:120%;
}
.navmenu a{
color:#666666;
font-family:arial;
font-size:12px;
text-decoration:none;
}
.navmenu a:hover{
text-decoration: underline;
}
.linie2{
display:inline;
float:left;
width:1px;
height:52px;
margin-top:16px;
margin-bottom:22px;
background-color:#CCCCCC;
} |
Par cette fonction javascript:maFonction('onglet1') je parviens a modifier lapparence de l'onglet:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13
|
function maFonction(name)
{
var tabs = new Array("onglet1", "onglet2", "onglet3");
for(i=0; i<3; i++){
url = "url(./image/"+tabs[i]+"_";
if(name != tabs[i]){
url += "in";
}
url += "active.gif)";
document.getElementById(tabs[i]).style.backgroundImage = url;
}
} |
je n'ai aucun probleme pour modifier la couleur du background de caque contenu, mais je voudrais faire plus, par exemple quand on clique sur ongletm qu'il y ait une image a la place des liens.
Comment puis-je procéder???
merci
bonne journée
Sophie