Bouton qui change
keriatsu
Messages postés
11
Date d'inscription
Statut
Membre
Dernière intervention
-
Loona21 Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
Loona21 Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
Bonsoir.
J'ai crée un site internet avec plusieur page. Pour le rendre plus attractif j'ai décidé de faire des bouton dans la barre de navigation qui change de couleur quand on survolle l'image. Mon problème est que je n'arrive pas à trouver de cript qui permet de faire cela.
Merci de votre aide !
J'ai crée un site internet avec plusieur page. Pour le rendre plus attractif j'ai décidé de faire des bouton dans la barre de navigation qui change de couleur quand on survolle l'image. Mon problème est que je n'arrive pas à trouver de cript qui permet de faire cela.
Merci de votre aide !
A voir également:
- Bouton qui change
- Change dns - Guide
- Diagnostic bouton photo - Accueil - Outils
- Bouton reinitialisation pc - Guide
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
- Symbole arrêt marche - Forum Word
6 réponses
Bonjours toi !
Alors voila la solution CSS que j'utilise. Elle est assez simple, il te suffit de la modifier a ton aise.
a { /* Ici le bouton normal * /
display:block;
background:url("adressedetonimage") 0 0 no-repeat;
text-decoration: none;
}
a:hover { */ Ici le bouton a afficher lors du survol */
background:url("adressedetonimage") 0 0 no-repeat;
}
NOTE : L'image du bouton par défault et l'image au survol sont deux images differente. Tu dois donc créer une image pour ton bouton par défault et une pour quand le bouton sera survolé !
Voila c'est mon tout premier post sur ce forum alors j'espere t'aider :) bye
Alors voila la solution CSS que j'utilise. Elle est assez simple, il te suffit de la modifier a ton aise.
a { /* Ici le bouton normal * /
display:block;
background:url("adressedetonimage") 0 0 no-repeat;
text-decoration: none;
}
a:hover { */ Ici le bouton a afficher lors du survol */
background:url("adressedetonimage") 0 0 no-repeat;
}
NOTE : L'image du bouton par défault et l'image au survol sont deux images differente. Tu dois donc créer une image pour ton bouton par défault et une pour quand le bouton sera survolé !
Voila c'est mon tout premier post sur ce forum alors j'espere t'aider :) bye
La solution css reste légère et efficaces pour authant que les images que tu veux utiliser soient pas trop
lourdes, sinon tu peut jouer avec les couleures sans images se qui te feras gagner du poids.
le resultat: http://www.rank-design.ch/client/menu.html
fichier css:
div.bord {
border: solid 1px #000000;
width: 142px;
}
a.bouton:link{
width: 140px;
display: block;
color: #006BB5;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #FFFF00;
}
a.bouton:visited{
width: 140px;
display: block;
color: #006BB5;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #FFFF00;
}
a.bouton:hover{
width: 140px;
display: block;
color: #EEDC00;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #3366FF;
}
.bouton{text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#006BB5;}
fichier html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="<!-- chemin de ton fichier css -->" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ton bouton -->
<div class="bord"><a href="https://www.google.ch/?gws_rd=ssl" class="bouton">Accueil</a></div>
</body>
</html>
lourdes, sinon tu peut jouer avec les couleures sans images se qui te feras gagner du poids.
le resultat: http://www.rank-design.ch/client/menu.html
fichier css:
div.bord {
border: solid 1px #000000;
width: 142px;
}
a.bouton:link{
width: 140px;
display: block;
color: #006BB5;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #FFFF00;
}
a.bouton:visited{
width: 140px;
display: block;
color: #006BB5;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #FFFF00;
}
a.bouton:hover{
width: 140px;
display: block;
color: #EEDC00;
text-decoration: none;
padding-top: 7px;
padding-bottom: 7px;
background-color: #3366FF;
}
.bouton{text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#006BB5;}
fichier html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="<!-- chemin de ton fichier css -->" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ton bouton -->
<div class="bord"><a href="https://www.google.ch/?gws_rd=ssl" class="bouton">Accueil</a></div>
</body>
</html>
Oui car en effet, et j'ai oublié de le preciser, le probleme dans mon solution CSS est celui-ci :
L'image du bouton qui sera afficher au survol est telecharger QUE lors du survol, donc selon la connection du visiteur et le poids de l'image, le bouton de survol peut mettre un certain temps avant de s'afficher.
Apres si tu veux quelques chose de plus estetique et qui n'encombre pas le site, prends du flash. Certe plus dur mais beaucoup mieux ^^
Voila, a partir d'ici je ne peux pas t'aider car je ne connais rien en flash xD désolé !
Bye et bonne continuation ^^
L'image du bouton qui sera afficher au survol est telecharger QUE lors du survol, donc selon la connection du visiteur et le poids de l'image, le bouton de survol peut mettre un certain temps avant de s'afficher.
Apres si tu veux quelques chose de plus estetique et qui n'encombre pas le site, prends du flash. Certe plus dur mais beaucoup mieux ^^
Voila, a partir d'ici je ne peux pas t'aider car je ne connais rien en flash xD désolé !
Bye et bonne continuation ^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
a { /* Ici le bouton normal * /
display:block;
background:url("adressedetonimage") 0 0 no-repeat;
text-decoration: none;
}
a:hover { */ Ici le bouton a afficher lors du survol */
background:url("adressedetonimage") 0 0 no-repeat;
}
Où dois-je le placer? Je suis un peu débutante ^^ Je n'y connais pas grands chose au CSS, html. Mais je connais bien le BBcode (C'est un code très simple pour les forum ^^) Mais bon ça pas du tout rapport ^^
Es ce que je met ce code dans le code de ma barre de navigation ?
Merci de m'aider^^
Tu trouveras facilement pleins de cours, de tutoriaux ou de scripts et notamment sur https://openclassrooms.com/fr/
Pour insérer ces codes, va voir par-là: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Je suis nouvelle ici et je viens me réintégrer à cette vieille conversation...
J'ai une autre question par rapport à ta méthode...
J'aimerai que lorsque je survol mon bouton :
d'une part, il change d'apparence (ça c'est bon j'ai compris maintenant, grace à ton post un peu plus haut ^^)
d'autre par, qu'il fasse également apparaître un texte à un autre endroit de la page
Est-ce possible et comment faire ?
Merci d'avance
Loona