Création boutons état
Résolu/Fermé
pierre
-
5 janv. 2012 à 22:21
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 7 janv. 2012 à 17:15
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 7 janv. 2012 à 17:15
A voir également:
- Création boutons état
- Creation compte gmail - Guide
- Création organigramme - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide
- Logiciel création karaoké gratuit - Télécharger - DJ & Karaoké
2 réponses
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
5 janv. 2012 à 22:24
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 ;)
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
Modifié par prosthetiks le 5/01/2012 à 22:45
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;
}
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
7 janv. 2012 à 16:58
essaye de modifier les valeurs de quelques pixels, tu vas comprendre
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
7 janv. 2012 à 17:15
7 janv. 2012 à 17:15
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+
