Création boutons état
Résolu
pierre
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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 ?
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:
- Création boutons état
- Creation compte gmail - Guide
- Création site web - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide
- Remettre pc etat usine - Guide
2 réponses
Hello,
Voici un exemple en CSS:
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">
</div>
</a>
</body>
</html>
merci c'est exactement ce genre de rendu que j'attendais maintenant je vais me pencher un peu sur le code ;)
Pour faire simple, le div utilisé comme bouton est entouré d'un lien "<a>":
Dans le css, on retrouve 3 règles:
La première:
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
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 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;
}
Salut
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+
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+