Prendre le contrôle de rollovers

Sur la plupart des navigateurs Web, il ya une bordure par défaut qui entoure les images qui sont utilisées comme liens. Il est habituellement un gros méchant, épais liseré bleu lumineux. Cela est probablement souhaitable, de même dans cet article, nous étudions les moyens que vous pouvez prendre soin d'elle dans votre CSS ...

Pour supprimer la bordure par défaut utiliser dans votre CSS:


a img { border: none; }


Vous pouvez aussi supprimer la bordure par défaut sur les images liées en incluant de "border = 0" dans la balise d'image, mais ceci est une propriété obsolète et n'est pas recommandée. Malheureusement, il est inclus sous forme de copie et de nombreux exemples de code-coller car il oblige le résultat désiré sans avoir à compter sur le propriétaire du site de maintien de la bonne CSS.

Que par défaut des bordures bleu n'est pas mal, il essaie juste de vous aider et vous faire connaître l'image de ses environs est un lien hypertexte. Nous allons prendre cette responsabilité sur nous-mêmes et voir si nous pouvons arriver à certains transferts d'images sont un peu plus agréable et plus intéressant.

La meilleure façon de voir ces exemples est d'afficher la page d'exemple et la meilleure façon de comprendre comment ils fonctionnent est de télécharger l'exemple et regardez ce code manuellement.

Exemple 1: Thick frontaliers

Cet exemple donne l'image de quelques pixels de remplissage et une bordure dans son état normal et y ajoute une couleur de fond sur capotage.

Exemple 2: tirets épais frontaliers

Il s'agit d'une technique similaire seul le renversement ajoute une bordure d'épaisseur en pointillés à l'image. L'astuce ici est que la frontière est là, dans son état normal ainsi, seulement elle est blanche comme la couleur de fond. Si cette frontière n'existait pas dans son état normal et a été ajouté au cours du renversement, l'image pourrait changer de position pour faire place à la frontière, ce qui serait un résultat discordant et indésirable.

Exemple 3: Noir & blanc à la couleur

Cette technique, l'image de «coloriser» sur capotage. C'est un peu plus compliqué que vous ne serez pas en mesure d'utiliser régulièrement balises img dans le code HTML. Vous utiliserez les éléments d'ancrage avec des noms de classes uniques. Ces ancres ont des hauteurs et des largeurs spécifiques et une image en arrière-plan. Puis, le renversement, vous pouvez permuter l'image de fond pour une version couleur.

Exemple 4: Ajouter Arrière-plan dégradé

Au lieu d'ajouter une couleur unie comme dans l'exemple 1, vous pouvez utiliser une image. Vient de donner l'image certains types de remplissage de chaque côté il ya donc une certaine marge pour le graphique se présente pas.

Exemple 5: Information Display

Cette technique rend le texte apparaît-il sous l'image sur capotage. Il se sert de la propriété background-image en CSS comme dans l'exemple 3, mais dans ce cas, l'image de fond reste le même. La différence est que dans l'état ordinaire, le texte est botté hors de l'écran avec un énorme décalage négatif qui est ensuite éliminé le retournement. Pour obtenir le texte de se présenter sous l'image au lieu d'au-dessus de lui donner l'ancre un rembourrage en haut d'un peu plus grande que la hauteur de l'image.