Bonjour à tous et à toutes,
Pour le menu d'un site je voudrais faire un rollover sur mes boutons. Jusque là j'utilisais une technique CSS pour mes rollovers et je n'avais jamais rencontré de problème.
Je joins un bout de code pour vous montrer la technique que j'emploie.
HTML:
et le CSS:
Mon image est divisée en 2 parties symétriques, la partie base est mon bouton accueil dans un coloris clair, la partie haute est mon bouton accueil dans un coloris plus foncé. Quand la souris passe sur l'image, celle ci se teinte automatiquement. Du classique quoi, rien d'innovant...
Le soucis que je rencontre c'est que cette fois je dois découper mes boutons en trois parties. En effet l'image ne comporte que le fond de couleur du bouton, et plus aucun texte, celui devra être saisi par l'utilisateur et donc s'adapter à la taille de l'intitulé.
J'ai donc une <div> avec mon bord gauche du bouton, une <div> avec le milieu et une troisième <div> avec le bord droit. Du coup je ne sais pas comment modifier l'image de ces trois <div> au passage de la souris sur l'une d'elles.
Voici une partie de mon code HTML actuel :
Et le CSS :
Avez vous une idée pour qu'au survole de la <div> "btnOngletEntier" qui contient les trois parties de mon boutons ceux changent en même temps?
Merci du temps que vous avez pris à cette lecture.
Pour le menu d'un site je voudrais faire un rollover sur mes boutons. Jusque là j'utilisais une technique CSS pour mes rollovers et je n'avais jamais rencontré de problème.
Je joins un bout de code pour vous montrer la technique que j'emploie.
HTML:
<html>
<head>
<title>Rollovers CSS</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<a href="#" class="rollover">Accueil</a>
</div>
</body>
</html>et le CSS:
.rollover
{
background: url(images/accueil.png) top center;
text-indent: -9999px;
display: block;
width: 100px;
height: 36px;
}
.rollover:hover {
background-position: bottom center;
}Mon image est divisée en 2 parties symétriques, la partie base est mon bouton accueil dans un coloris clair, la partie haute est mon bouton accueil dans un coloris plus foncé. Quand la souris passe sur l'image, celle ci se teinte automatiquement. Du classique quoi, rien d'innovant...
Le soucis que je rencontre c'est que cette fois je dois découper mes boutons en trois parties. En effet l'image ne comporte que le fond de couleur du bouton, et plus aucun texte, celui devra être saisi par l'utilisateur et donc s'adapter à la taille de l'intitulé.
J'ai donc une <div> avec mon bord gauche du bouton, une <div> avec le milieu et une troisième <div> avec le bord droit. Du coup je ne sais pas comment modifier l'image de ces trois <div> au passage de la souris sur l'une d'elles.
Voici une partie de mon code HTML actuel :
<!--début du surMenu avec les boutons de navigation -->
<div id="surMenu">
<!--début Bouton Accueil -->
<div class="btnOngletEntier">
<div class="btnOngletOrangeLeft"></div>
<div class="btnOngletOrangeCenter"><span class="typoSurMenu"> Accueil </span></div>
<div class="btnOngletOrangeRight"></div>
</div>
<!--fin Bouton Accueil -->
</div>
<!--fin du surMenu avec les boutons de navigation -->Et le CSS :
#surMenu
{
width:800px;
padding-left:170px;
margin-top:0;
height:45px;
text-align:center;
}
.btnOngletEntier
{
float:left;
padding:0;
margin:0;
}
.btnOngletOrangeLeft
{
float:left;
background-image:url(../img/onglet-orange-gauche-off.jpg);
background-repeat:no-repeat;
width:21px;
height:45px;
}
.btnOngletOrangeCenter
{
float:left;
background-image:url(../img/onglet-orange-centre-off.jpg);
background-repeat:repeat-x;
height:32px;
padding-top:13px;
}
.btnOngletOrangeRight
{
float:left;
background-image:url(../img/onglet-orange-droite-off.jpg);
background-repeat:no-repeat;
width:21px;
height:45px;
}Avez vous une idée pour qu'au survole de la <div> "btnOngletEntier" qui contient les trois parties de mon boutons ceux changent en même temps?
Merci du temps que vous avez pris à cette lecture.
