Comment faire une carte CSS image

07/03/2013 by admin

Comment faire une carte CSS image


cartes d'image CSS permettent aux développeurs de placer des points chauds dans les images qui contiennent des liens vers d'autres pages Web. Par exemple, un point chaud peut être placé autour du visage d'une personne dans l'image qui contient un lien vers leur page web personnelle. Lorsqu'un utilisateur place la souris sur le visage de la personne une forme apparaîtra qui délimite la zone de point chaud. Création d'une carte d'image CSS implique d'appeler une image en html et ensuite mettre en place les codes CSS correspondant entre le html balises <head>. Ce articles montre comment faire une carte d'image des yeux et du nez sur un portrait de Ginevra Benci peinte par Leonardo da Vinci.

Instructions

Cartographie It Out

1 Créez deux pages Web liées. Cet exemple crée un pour les yeux et un pour le nez. La page des yeux sera lu "Ce sont les yeux» et la page de nez seront lus "Ceci est le nez." L'échantillon html ci-dessous crée les deux pages:
<Html>
<Head>
<Title> Yeux </ title>
</ Head>
<Body>
<H1> Ce sont les yeux! </ H1>
</ Body>
</ Html>

2 Créer les balises HTML pour l'image. Ouvrez un document vierge et utiliser le code suivant pour appeler l'image à partir du répertoire. Vous devrez changer le nom et les spécifications de taille de votre image:
<Html>
<Head>
<Title> Face </ title>
<Div id = "image">
<Img width = "550" height = "425" />
</ Div>
</ Body>
</ Html>

3 Ajouter des liens vers les images dans une liste tag unordered. Pour ajouter les liens placer le code suivant entre l'image et les balises de division:
<Ul>
<Li class = "de d_eyes">
<a href="eyes.html" title = "eyes">
les yeux
</a>
<Li class = "de d_nose">
<a href="nose.html" title = "nose">
nez
</a>
</ Li>
</ Ul>
Vous pouvez modifier les noms de classe pour mieux répondre à votre image.

4 Créez le CSS pour l'image. Le code suivant entre les balises </ title> et </ head> du document HTML:
<Style type = "text / css">

image {

largeur: 550px;
hauteur: 425px;
position: relative;
}

l'image ul {

margin: 0;
padding: 0;
list-style: none;
}
Vous pouvez régler les valeurs comme vous le souhaitez. Par exemple, vous pouvez choisir d'ajouter une valeur pour l'image de rembourrage. Assurez-vous que la référence correspond au nom du div. Dans cet exemple, il est «l'image». Vous pouvez choisir un autre comme "image" ou "pic", etc.

5 Créez le CSS pour les liens. Le code CSS suivant situe deux points chauds séparés sur les yeux et le nez:

l'image .d_eyes a {

position: absolute;
largeur: 100px;
hauteur: 20px;
text-indent: -1000em;
}

l'image .d_nose a {

position: absolute;
largeur: 40px;
hauteur: 20px;
text-indent: -1000em;
}

l'image .d_eyes a {

top: 140px;
gauche: 270px;
}

l'image .d_nose a {

top: 180px;
gauche: 300px;
}

l'image a: hover {

border: 5px solid # 000000
}
</ Style>
Bien sûr, vos spécifications varient en tant que votre image sera différente. Un logiciel de conception graphique comme Coral Draw ou Adobe Photoshop peut fournir des informations de position de pixel. Cependant, vous pouvez toujours trouver la bonne position par essais et erreurs ainsi. Enregistrer la page dans le même répertoire que les deux autres fichiers.

6 Comment faire une carte CSS image


Testez la carte d'image. Allez dans le répertoire où les fichiers sont enregistrés et double cliquez sur le fichier html où l'image apparaît. Vous devriez voir votre image dans le navigateur. Exécutez votre souris où les points chauds ont été placés. Vous verrez un cadre noir apparaît. Cliquez dans le cadre et les pages de référence ouvriront.

Conseils et avertissements

  • Essayez avec une assez grande première image car ils sont plus faciles pour le développement des cartes d'image.
  • Assurez-vous que vos références CSS correspondent aux noms du html de référence. Sinon, la carte d'image ne parviendra pas à exécuter.

Articles Liés