Création boutons état

Résolu

pierre -
RAD ZONE Messages postés 5362 Statut Contributeur - 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 ?

Afficher la suite

2 réponses

prosthetiks Messages postés 1309 Statut Membre 431

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>

Réponse 2 / 2
pierre

merci c'est exactement ce genre de rendu que j'attendais maintenant je vais me pencher un peu sur le code ;)
0
1. prosthetiks Messages postés 1309 Statut Membre 431
  
  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
2. pierre
  
  j'ai pas trop comprit ton histoire de décalage ?
  
  0
3. prosthetiks Messages postés 1309 Statut Membre 431
  
  essaye de modifier les valeurs de quelques pixels, tu vas comprendre
  
  0
4. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
  
  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

Création boutons état

2 réponses

Discussions similaires

Newsletters