Bouton qui change
Fermé
keriatsu
Messages postés
11
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
27 avril 2009
-
26 juin 2007 à 00:08
Loona21 Messages postés 8 Date d'inscription dimanche 14 mars 2010 Statut Membre Dernière intervention 20 mars 2010 - 15 mars 2010 à 01:00
Loona21 Messages postés 8 Date d'inscription dimanche 14 mars 2010 Statut Membre Dernière intervention 20 mars 2010 - 15 mars 2010 à 01:00
A voir également:
- Bouton qui change
- Bouton shift pc ✓ - Forum Jeux vidéo
- Change dns - Guide
- Facebook piraté et adresse email changé ✓ - Forum Facebook
- Réinitialiser chromecast sans bouton - Guide
- Ou est la touche shift sur un clavier - Forum Jeux vidéo
6 réponses
Devatoria
Messages postés
27
Date d'inscription
mardi 26 juin 2007
Statut
Membre
Dernière intervention
10 juin 2011
11
26 juin 2007 à 01:01
26 juin 2007 à 01:01
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
keriatsu
Messages postés
11
Date d'inscription
dimanche 24 juin 2007
Statut
Membre
Dernière intervention
27 avril 2009
2
26 juin 2007 à 00:31
26 juin 2007 à 00:31
merci, mais pourrais tu être plus explicite ?
falcor
Messages postés
61
Date d'inscription
mercredi 28 avril 2004
Statut
Membre
Dernière intervention
26 mai 2009
2
26 juin 2007 à 10:30
26 juin 2007 à 10:30
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>
Devatoria
Messages postés
27
Date d'inscription
mardi 26 juin 2007
Statut
Membre
Dernière intervention
10 juin 2011
11
26 juin 2007 à 11:32
26 juin 2007 à 11:32
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
Bonjour,
Je cherche en xhtml comment faire un bouton qui cache de l'écriture et que des que l'on clique dessus l'écriture s'affiche par exemple mon bouton s'apelle sommaire, quand je clique dessus le sommaire apparaît
Merci d'avance
Je cherche en xhtml comment faire un bouton qui cache de l'écriture et que des que l'on clique dessus l'écriture s'affiche par exemple mon bouton s'apelle sommaire, quand je clique dessus le sommaire apparaît
Merci d'avance
falcor
Messages postés
61
Date d'inscription
mercredi 28 avril 2004
Statut
Membre
Dernière intervention
26 mai 2009
2
26 juin 2007 à 00:25
26 juin 2007 à 00:25
hello.
3 solutions.
sous flash
relover
ou en css
3 solutions.
sous flash
relover
ou en css
4 févr. 2009 à 16:03
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^^
18 févr. 2009 à 09:54
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
15 mars 2010 à 01:00
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