cartes images 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 . Quand 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 consiste à appeler une image en html et ensuite mettre en place les codes CSS correspondants entre les balises HTML . Cette articles montre comment faire une carte d'image des yeux et le nez sur un portrait de Ginevra Benci peinte par Leonardo da Vinci. Choses que vous devez
éditeur de texte tel que Notepad , Emacs , ConTextMozilla , Explorer ou autre navigateur
Voir Plus Instructions
Mapping It Out
1

créer deux lié pages Web. Cet exemple crée une pour les yeux et une pour le nez. La page des yeux lira «Ce sont les yeux " et la page de nez lira «C'est le nez. " L'échantillon HTML ci-dessous crée deux sont les yeux!
2

Créer des balises HTML pour l'image. Ouvrez un document vierge et utiliser le code suivant pour appeler l'image à partir du répertoire . Vous aurez à changer le nom et les spécifications de taille de votre image : Face < /title> <div id="image"> <img src = " da_vinci . jpg " width =" "height =" 550 425 "/> </div> </body> </html> <br> 3 <p> Ajouter des liens vers les images au sein d'une désordonnée tag de liste. Pour ajouter les liens placez le code suivant entre l'image et les balises de division : <ul> <li class="d_eyes"> <a href="eyes.html" title = "eyes"> yeux </a> <li class="d_nose"> <a href="nose.html" title = "nose"> nez </a> </li> </ul> Vous voudrez peut-être changer l' noms de classe à mieux répondre à vos images. <br> 4 <p> Créer le CSS pour l'image. Le code suivant doit passer entre les balises < /title> et </head> du document HTML : <style type="text/css"> # image { width: 550px ; hauteur : 425px ; poste : relative; } # Image ul {margin: 0; padding: 0; list-style : none;} vous pouvez ajuster les valeurs comme vous le souhaitez . Par exemple, vous pouvez choisir d'ajouter une valeur à l'image rembourrage. Assurez-vous que la référence correspond au nom de la div . Dans cet exemple , il est «image». Vous pouvez choisir un autre comme " image" ou "pic" etc <br> 5 <p> Créer le CSS pour les liens. Le code CSS suivant situe deux points chauds distincts sur les yeux et le nez : # image de d_eyes a. {Position : absolute; width: 100px ; hauteur : 20px; text-indent : - 1000em ; } # image de d_nose un {position: . Absolue ; largeur : 40px ; hauteur : 20px; text-indent : - 1000em ; . } # image de d_eyes un { top: 140px ; gauche : 270px ; } # image de d_nose un { top: 180px ; gauche : . 300px ; } # l'image d'un : hover {border : 5px solid # 000000 } </style> Bien sûr , vos spécifications varieront 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 position correcte par essais et erreurs aussi. Enregistrez la page dans le même répertoire que les deux autres fichiers . <br> 6 <p> Test de la carte de l'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 . Lancez votre souris où les hotspots ont été placés . Vous verrez un cadre noir apparaît. Cliquez à l'intérieur du cadre et les pages de référence s'ouvre. <br> <br> <div class=fr4><script language='javascript' src='http://www.ordinateur.cc/ad/fr/4.js'></script></div> <div class=fr5><script language='javascript' src='http://www.ordinateur.cc/ad/fr/5.js'></script></div> </td> </tr> </table> <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" > </td> </tr> </table> <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="39" align="left" >Article précédent：<span class="nr"> <a class='LinkPrevArticle' href='/programmation/Computer-Programming-Languages/88794.html' >Qui a été le 1er programmeur informatique </a></li></span><br /> Article suivant：<span class="nr"> <a class='LinkNextArticle' href='/programmation/Computer-Programming-Languages/88796.html' >Comment calculer le module </a></li></span></td> </tr> </table> <table width="95%" height="10" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left" ></td> </tr> </table> <table width="96%" height="22" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#EFEFEF"> <tr> <td width="2%" align="left" ></td> <td width="98%" align="left" >Articles recommandés</td> </tr> </table> <table width="95%" height="10" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left" ></td> </tr> </table> <table width="95%" height="10" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left" > <li><a href="/programmation/Computer-Programming-Languages/88340.html">Introduction à SQL Certification </a></li><li><a href="/programmation/Computer-Programming-Languages/87692.html">Comment faire pour supprimer la boîte bleue autour de Liens en HTML </a></li><li><a href="/programmation/Computer-Programming-Languages/88518.html">Qu'est -ce qu'un objet Web </a></li><li><a href="/programmation/Computer-Programming-Languages/88591.html">Comment prendre les caractères alphabétiques , mais laisser caractères numériques dans SQL </a></li><li><a href="/programmation/Computer-Programming-Languages/88576.html">SQL Fundamentals Formation </a></li><li><a href="/programmation/Computer-Programming-Languages/88564.html">Comment savoir programmation PLC </a></li><li><a href="/programmation/Computer-Programming-Languages/87657.html">Comment stocker une variable de chaîne en type Integer </a></li><li><a href="/programmation/Computer-Programming-Languages/88246.html">Comment savoir Windows Mobile </a></li><li><a href="/programmation/Computer-Programming-Languages/88709.html">Comment créer un lien HTML qui crée un e-mail et vient compléter la gamme de sujets </a></li><li><a href="/programmation/Computer-Programming-Languages/88579.html">Qu'est-ce qu'un langage de programmation informatique </a></li> </td> </tr> </table> <table width="95%" height="10" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="left" ></td> </tr> </table></td> </tr> </table> <table width="980" height="12" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="980" height="90" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#3597E2"> <tr> <td align="center" class="foot">Connaissances Informatiques © http://www.ordinateur.cc <br /> </td> </tr> </table>   </body> </html>