Sujet Précédent Sujet Suivant

Création bouton à état en CSS (fichier séparé

Fermé
pedro - Modifié par pedro le 17/01/2012 à 19:51
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 17 janv. 2012 à 20:57
Bonjour, Je suis entrain d'apprendre la création de site web et j'ai fini la partie mise en forme avec CSS

je me pose une question à sur une des parties, je sais maintenant créer des hyperliens à états ( voir des textes ). Je me demande maintenant si en utilisant la même méthode je pourrais créer des boutons à état en utilisant des images.

Ex: le bouton est un carré rouge quand on ne fait rien, il devient bleu quand on le survol et il devient rose quand on clique dessus.

J'ai essayé de cette manière mais cela n'a pas marché :P

Code HTML:

<a href="http://www.google.com">google</a>

Code CSS:

a
{
<img src="normal.jpg" alt="bouton normal" />
}
a:hover
{
<img src="survol.jpg" alt="bouton survole" />
}


Merci d'avance pour vos réponses (je précise que je code mon CSS dans un fichier séparé)
A voir également:

3 réponses

Réponse 1 / 3
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
17 janv. 2012 à 19:58
Salut,

Deux choses:

Tu n'as pas le droit de mettre du code HTML dans du code CSS.

a {
<img src="normal.jpg" alt="bouton normal" />
}
a:hover {
<img src="survol.jpg" alt="bouton survole" />
}

Pas contre tu peux très bien le faire de la sorte: 

<html>
<head>
  <title></title>
  <style type="text/css" media="screen">
    #bouton{
      background:url('http://eu.blizzard.com/store/_images/fr-FR/nav-bar.gif') no-repeat 0 0;
      height:83px;
      width:152px;
    }
    a:hover #bouton{
      background-position: 0 -83px;
    }
    a:active #bouton{
      background-position: -152px -83px;
    }
  </style>
</head>
<body>
  <a href="#">
    <div id="bouton">
      &nbsp;
    </div>
  </a>
</body>
</html>


++
0
pedro
17 janv. 2012 à 20:08
désolé mais je ne comprend pas bien ce code, est-ce à utiliser pour le CSS ? dans ce case pourquoi avoir mis <html>

<head>
<title></title>

est-ce que c'est gu html avec css dans le même fichier ?
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
17 janv. 2012 à 20:19
Ce qui se trouve entre les balises "style" est du code CSS. Il est simplement intégré directement dans le code HTML, mais ça ne change rien. Au lieu de le mettre là j'aurais pu le mettre dans un fichier séparé (ce qui est plus propre) mais moins pratique à partager sur un forum.
0
pedro
17 janv. 2012 à 20:24
Ok je comprend mieux ( c'est parce que j'ai pris l'habitude de travailler sur 2 fichiers ), donc


#bouton{
background:url('http://eu.blizzard.com/store/_images/fr-FR/nav-bar.gif') no-repeat 0 0;
height:83px;
width:152px;
}
a:hover #bouton{
background-position: 0 -83px;
}
a:active #bouton{
background-position: -152px -83px;
}

ca c'est le code CSS et que veut dire #bouton? pourquoi un #?
0
nicelife90 Messages postés 615 Date d'inscription vendredi 24 septembre 2010 Statut Membre Dernière intervention 10 avril 2018 151
17 janv. 2012 à 20:29
#******* veut dire id******** donc si je met #menu je dois donner à ma balise div id menu exemple <div id="menu"></div> ce n'est pas obliger d'être un div non plus.

Si ça aurais été .menu alors cella aurais été une classe. Donc <div class="menu"></div>
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 17/01/2012 à 20:38
#bouton parce que ce bout de code cible le <div id="bouton">
0
Réponse 2 / 3
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
17 janv. 2012 à 19:59
Ton code html n'est qu'un lien et non un bouton.

Tu ne peux pas utiliser du html dans le css.
Tu peux appliquer les effets que tu veux à un lien mais j'ai un doute concernant le bouton.

Si tu as une image qui sert de lien et que tu veux qu'elle change si on la survole, il faut utiliser du Javascript il me semble.

Un conseil, révise ton cours sur le css ( => siteduzero ) et se sera plus claire pour toi ;)
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
17 janv. 2012 à 20:07

Si tu as une image qui sert de lien et que tu veux qu'elle change si on la survole, il faut utiliser du Javascript il me semble.

[...]

Un conseil, révise ton cours sur le css


Je te conseille de faire de même =)
0
nicelife90 Messages postés 615 Date d'inscription vendredi 24 septembre 2010 Statut Membre Dernière intervention 10 avril 2018 151
17 janv. 2012 à 20:10
effectivement pas besoin de java-script pour faire ceci! plusieurs moyen contourné peuvent faire le travail beaucoup plus simplement.
0
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
17 janv. 2012 à 20:12
^^ Je viens de découvrir cette utilité des pseudo-format.
Mais sinon je maitrise bien le css.
Et c'est possible à faire en JS ( lourd mais c'est possible ^^ )
0
nicelife90 Messages postés 615 Date d'inscription vendredi 24 septembre 2010 Statut Membre Dernière intervention 10 avril 2018 151
17 janv. 2012 à 20:19
Oui effectivement possible, mais inutile comme tu viens de le mentionné.
0
Réponse 3 / 3
nicelife90 Messages postés 615 Date d'inscription vendredi 24 septembre 2010 Statut Membre Dernière intervention 10 avril 2018 151
17 janv. 2012 à 20:01
Moi je le fais toujours comme ceci et ça fonctionne bien.

<div class="bouton">
<a href="dedi.php"></a>
</div>



.bouton {
height: auto;
width: 225px;
margin-right: auto;
margin-left: auto;
}
.bouton a {
display:block;
width:218px;
line-height:50px;
text-align:center;
vertical-align:middle;
color:white;
text-decoration:none;
background-image: url(images/btnadmin.png);
background-repeat: no-repeat;
height: 95px;
}
.bouton a:hover {
background-image: url(images/btnadmin_hover.png);
background-repeat: no-repeat;
}

tu peux utiliser un span aussi si tu souhaite en mettre plus d'un cote à cote.
0
nicelife90 Messages postés 615 Date d'inscription vendredi 24 septembre 2010 Statut Membre Dernière intervention 10 avril 2018 151
17 janv. 2012 à 20:03
il y a des élément css inutile ici comme color je suis désoler j'ai copier coller un peut vite
0

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses