Le rétroéclairage des boutons dans les pages Web est généralement organisé à l'aide de deux images. Lorsque vous passez le curseur de la souris sur l'élément correspondant du document (lien ou bouton), un événement est généré qui, conformément aux instructions écrites en langage CSS, invite le navigateur à changer d'image en une autre. Lorsque le curseur de la souris est éloigné du bouton, le remplacement inverse se produit.
Nécessaire
Connaissance de base des langages HTML et CSS
Instructions
Étape 1
Il existe plusieurs options pour mettre en œuvre un tel mécanisme de mise en évidence. Pour chacun d'entre eux, vous pouvez utiliser le même code HTML, en ne modifiant que la description de style correspondante. Le code HTML du bouton peut ressembler à ceci: texte sur le bouton Voici l'identifiant de cet élément de page (id = "btnA") auquel sera attachée la description du style.
Étape 2
Pour mettre en œuvre l'une des options, vous devez préparer deux images, dont l'une montre le bouton dans un état inactif et la seconde avec un rétro-éclairage. Ils seront utilisés comme image de fond du lien. Les instructions CSS pour ce bouton peuvent ressembler à ceci:
un # btnA, un # btnA: visité {
bloc de visualisation;
largeur: 50px;
hauteur: 20px;
arrière-plan: url (btnA.gif) sans répétition;
bordure: 0;
}
a # btnA: survolez {
arrière-plan: url (btnA_hover.gif) sans répétition;
bordure: 0;
}
Ici, dans le premier bloc, les dimensions de l'image représentant le bouton sont indiquées (largeur: 50px; hauteur: 20px;). Vous devez les remplacer par les dimensions de votre image. Les noms des fichiers images doivent être modifiés de la même manière: btnA.
Étape 3
Une alternative est de mettre les deux images en une seule image. Il peut être l'un au-dessus de l'autre, ou il peut être à côté de l'autre. Il sera également utilisé comme arrière-plan pour le lien. Étant donné que les tailles des boutons sont spécifiées dans la description du style de bouton, tout ce qui n'y rentre pas ne sera pas visible. Dans ce cas, les instructions placées dans la description CSS doivent, lors du survol du curseur de la souris, faire défiler l'image de fond de sorte que la zone avec l'image du bouton en surbrillance tombe dans le cadre. Pour cette option, le code de l'étape précédente doit être modifié comme suit:
un # btnA, un # btnA: visité {
bloc de visualisation;
largeur: 50px;
hauteur: 20px;
arrière-plan: url (btnA.gif) sans répétition;
bordure: 0;
}
a # btnA: survolez {
arrière-plan: url (btnA.gif) sans répétition 21px;
bordure: 0;
}
Cela suppose que vous ayez placé les images les unes au-dessus des autres (surlignées en bas) et enregistrées dans un fichier appelé btnA.gif. La hauteur des boutons est de 20px, la largeur est de 50px - vous devez remplacer ces valeurs par les vôtres.
