En règle générale, les flèches graphiques sur les sites Web sont utilisées pour organiser la navigation. Lorsque vous cliquez sur un tel pointeur, vous accédez à une autre page ou à une autre section de la page en cours. Parfois, certaines actions leur sont liées - mise en évidence du contenu du champ de balise, lancement d'un script JavaScript, etc. Pour souligner que cette flèche est un élément actif, utilisez l'effet "highlight", c'est-à-dire change d'apparence au survol de la souris.
Nécessaire
Connaissance de base des langages HTML et CSS
Instructions
Étape 1
Déterminez le mécanisme de mise en œuvre de la mise en évidence des flèches qui vous convient le mieux. Il y en a plusieurs, deux simples sont donnés dans les étapes suivantes de cette instruction. Ils utilisent tous les deux la pseudo-classe CSS hover. Lorsque le curseur de la souris est sur un élément graphique (flèche), le style décrit dans cette pseudo-classe lui est appliqué, et le reste du temps ce style n'est pas actif. Pour les deux options décrites ci-dessous, vous pouvez utiliser le même HTML code, mais des descriptions de style différentes. Le code fléché dans la source de la page peut être écrit comme suit: L'attribut id spécifie l'identifiant du lien (flècheA), par lequel le navigateur déterminera laquelle des descriptions de style doit lui être appliquée.
Étape 2
La première option vous demandera de préparer deux images de flèches - avec et sans rétro-éclairage. Enregistrez-les dans des fichiers avec des noms tels que arrON.
une #flècheA, une #flècheA: visité {
bloc de visualisation;
hauteur: 30px;
largeur: 100 pixels;
arrière-plan: url (arrOFF.gif) sans répétition;
bordure: 0;
}
une #flècheA: survolez {
arrière-plan: url (arrON.gif) sans répétition;
bordure: 0;
}
Le premier bloc contient les dimensions de la flèche (hauteur: 30px; largeur: 100px;) - remplacez-les par les dimensions des images de flèches préparées.
Étape 3
La deuxième option permet de se débrouiller avec un seul fichier image. Vous devez y placer les deux images de la flèche - à la fois surlignées et inactives. Vous pouvez les placer côte à côte, vous pouvez l'un au-dessus de l'autre. Dans l'exemple de code, nous supposerons que la flèche en surbrillance est placée sous la flèche inactive et que le fichier est nommé arr.
une #flècheA, une #flècheA: visité {
bloc de visualisation;
largeur: 100 pixels;
hauteur: 30px;
arrière-plan: url (arr.gif) sans répétition;
bordure: 0;
}
une #flècheA: survolez {
arrière-plan: url (arr.gif) sans répétition 31px;
bordure: 0;
}
N'oubliez pas de redimensionner ici aussi.
