Création boutons état

Résolu
pierre -  
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 ?

2 réponses

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