De cartographie par image avec CSS

De cartographie par image - Ce tutoriel va vous montrer les avantages de la cartographie de l'image et pourquoi vous devriez le mettre en œuvre lors de la construction des sites Web. Je vais vous guider à travers le comment et le pourquoi, en plus de vous montrer l'image de cartographie dans l'action. Ce tutoriel cartographie image est destiné aux débutants et ne nécessitent que vous connaissez les bases du HTML et du CSS.

Pour voir la démo de cartographie sur l'image en action cliquez ici

Pourquoi utiliser une carte-image?

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 un logiciel d'imagerie la plus bonne comme Photoshop.

Il ya deux avantages principaux à la cartographie de l'image. Le code plus propre premier étant, quelque chose qui tous les concepteurs de sites Web devraient aspirer à atteindre, la seconde est l'image mappages capacité unique de surmonter les problèmes posés par des états de bouton.

Lors de l'utilisation des images survolées vous aurez besoin de télécharger plus que 1 image, vous aurez également besoin d'afficher ce mode lorsque les changements d'état d'image, ce qui signifie que votre navigateur aurez besoin pour rendre la seconde image téléchargée, donc le retournement ne sera pas aussi lisse l' première fois qu'il est affiché. En utilisant une carte-image s'arrête à ce problème tout à fait, parce que quand l'image originale est téléchargé est ainsi la seconde. Il n'ya pas de décalage, c'est aussi simple que cela.

Comment faire pour utiliser une carte-image

Examinons ce que je veux de vouloir utiliser l'icône ci-dessus comme une image de survol. Cela aura deux états: grisé lorsque la page charge initialement, puis de couleur lorsque l'utilisateur passe au-dessus. Pour ce faire, nous aurons besoin d'utiliser un peu de style CSS simple, le code voulez regarder 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 le voir la même image est appliquée à deux Etats les style, tout ce que nous faisons pour changer l'état est la modification du background-position, donc quand l'utilisateur survole le lien les changements d'état, mais tout ce qui est réellement changer est le position de l'image d'arrière-plan sur la page. La vraie beauté de cela est la petite quantité de code HTML réel dont vous avez besoin sur la page, une fois que vous avez fait cela. Pour notre exemple, le HTML réelle ressemble à ceci.

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


C'est tout ce qu'il ya à faire. Avec juste une petite quantité de CSS et de la quantité encore plus faible de HTML, nous pouvons créer une façon très rapide et puissant pour des images survolées. Pour voir la démo en action, cliquez sur ici .