Cartographie par image avec CSS

Image Mapping - Ce tutoriel va vous montrer les avantages de la cartographie image et pourquoi vous devriez le mettre en œuvre quand construction des sites Web. Je vous emmène à travers le comment et le pourquoi, en plus de vous montrer de cartographie par image dans l'action. Cette cartographie image tutoriel est destiné aux débutants et ne requièrent que vous possédiez les bases du HTML et CSS.

Pour voir la démo de mappage d'image en action Cliquez ici

Pourquoi utiliser une image de carte?

Songez à l'image suivante. Notez que c'est en fait 2 images qui ont été placés dans le même fichier. Ceci peut être réalisé en utilisant la plupart des logiciels de bonne imagerie tels que Photoshop.

Il ya deux principaux avantages à la cartographie de l'image. La première étant code plus propre, quelque chose que tous les concepteurs web doivent aspirer à atteindre, le second est l'image mappages capacité unique pour surmonter les problèmes posés par les états du bouton.

Lorsque vous utilisez des images rollover vous aurez besoin de télécharger plus que juste 1 image, vous aurez également besoin d'afficher cette valeur si l'image change d'état, ce qui signifie que votre navigateur nécessité de rendre l'image téléchargée seconde, donc le changement de date ne sera pas lisse que la première fois qu'il est affiché. L'utilisation d'une carte-image s'arrête à ce problème tout à fait, parce que quand l'image originale est téléchargée est donc le second. Il n'y a pas de lag, c'est aussi simple que cela.

Comment faire pour utiliser une image de carte

Prenons l'exemple que je veux de vouloir utiliser l'icône ci-dessus comme une image de retournement. Cela aura deux états: grisé lorsque la page charge initialement, puis de couleur lorsque le pointeur reste au-dessus. Pour ce faire, nous aurons besoin d'utiliser une simple style CSS, le code sera voulez ressembler à quelque chose comme ça.

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


Comme vous pouvez voir la même image est appliquée à la fois aux États-style, nous ne faisons rien pour changer l'état modifie le background-position, donc quand le pointeur reste sur le lien entre les changements d'État, mais tout cela change réellement est le position de l'image de fond sur la page. La véritable beauté de cela est la faible quantité de réels HTML que vous désirez sur la page, une fois que vous avez fait cela. Pour notre exemple, le code HTML réel ressemble à ceci.

< a class = "bookmark" href = "#" >Delicious</ a >


C'est tout ce qu'il ya à faire. Avec seulement une petite quantité de CSS et de la quantité encore plus faible de HTML, nous pouvons créer un moyen très rapide et puissant aux images de retournement. Pour voir la démo en action Cliquez ici.