Sujet Précédent Sujet Suivant

Création boutons état

Résolu/Fermé
pierre - 5 janv. 2012 à 22:21
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 7 janv. 2012 à 17:15
Bonjour, j'aurais aimer savoir si pour créer des boutons à état (ex: relevé,survolé,cliqué) pour son site web il faut obligatoirement les créer en flash ou peut on les créer en html/css ?

PS: est-ce que les boutons de type flash sont tout de même visibles sur des iPad, iPhone même s'ils ne s'exécutent pas ?
A voir également:

2 réponses

Réponse 1 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
5 janv. 2012 à 22:24
Hello,

Voici un exemple en CSS: 

<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
Réponse 2 / 2
pierre
5 janv. 2012 à 22:34
merci c'est exactement ce genre de rendu que j'attendais maintenant je vais me pencher un peu sur le code ;)
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 5/01/2012 à 22:45
Pour faire simple, le div utilisé comme bouton est entouré d'un lien "<a>": 

<a href="#">     
    <div id="bouton">     
            
    </div>     
  </a>


Dans le css, on retrouve 3 règles:
La première: 
#bouton{     
      background:url('http://eu.blizzard.com/store/_images/fr-FR/nav-bar.gif') no-repeat 0 0;     
      height:83px;     
      width:152px;     
 }

le div #bouton a une hauteur de 152px, une largeur de 152px et une image de fond (https://eu.shop.battle.net/en-us) en position top:0 et left: 0

Seconde règle:
Quand le <a> entourant mon bouton est survolé (:hover), on déplace l'image de fond de -83px vers le haut.
Les règles qui ne sont pas surchargées (height et width) restent identiques que dans la règle 1 
a:hover #bouton{     
      background-position: 0 -83px;     
}


et la dernière:

Quand le <a> entourant mon bouton est enfoncé (:active), on décale l'image de fond de -152px vers la gauche et de -83px vers le haut. 
a:active #bouton{     
     background-position: -152px -83px;     
}
0
pierre
6 janv. 2012 à 20:21
j'ai pas trop comprit ton histoire de décalage ?
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
7 janv. 2012 à 16:58
essaye de modifier les valeurs de quelques pixels, tu vas comprendre
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
7 janv. 2012 à 17:15
Salut 
j'ai pas trop comprit ton histoire de décalage ?

cela s appelle " des portes coulissantes " et est tres pratique a utiliser ,
cela diminue le nombre d images et evite les temps de loading !

a+
0

Discussions similaires

L'état actuel de votre carte sim ne requiert aucune activation
Rebecca45_3459 -
Nicole -

5 réponses
Trouver l'Etat/Province des départements Français ?
Lou -
Ysabe_l -

2 réponses
état/province ?
maellrz -
TOGBE -

5 réponses