Comment faire une image CSS carte

programmation

C /C + + Programming

Computer Programming Languages

Delphi Programming

Programmation Java

Programmation JavaScript

PHP /MySQL Programmation

programmation Perl

Programmation Python

Ruby Programming

Visual Basics programmation

* Connaissances Informatiques >> programmation >> Computer Programming Languages >> Content

Comment faire une image CSS carte

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=ad2><script language='javascript' src='/ad/201310/4.js'></script></div> </div> </td> </tr> </table> <table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <table width="100%" height="7" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/programmation/computer-programming-languages/88794.html' >Qui a été le 1er programmeur informatique </a></li></p></td> </tr> <tr> <td width="49%"> next ： <a class='LinkNextArticle' href='/programmation/computer-programming-languages/88796.html' >Comment calculer le module </a></li></td> </tr> </table></td> </tr> </table> <table width="100%" height="7" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> articles connexes </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87459.html" title="Comment faire pour convertir binaire à Byte " target="_self">Comment faire pour convertir binaire à Byte </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88830.html" title="Comment faire une horloge numérique " target="_self">Comment faire une horloge numérique </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87750.html" title="Comment copier sur le bouton Code pour Embedding " target="_self">Comment copier sur le bouton Code pour Embedding </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88118.html" title="Comment écrire un script AWK " target="_self">Comment écrire un script AWK </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87955.html" title="Comment faire pour vérifier pour les attributs de visibilité primaires " target="_self">Comment faire pour vérifier pour les attributs de visi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86701.html" title="Définition d'une fonction de rappel " target="_self">Définition d'une fonction de rappel </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88812.html" title="L'histoire de la programmation informatique " target="_self">L'histoire de la programmation informatique </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87764.html" title="Comment faire un site Web personnalisable " target="_self">Comment faire un site Web personnalisable </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88909.html" title="Comment effectuer un décalage Bit dans Basique " target="_self">Comment effectuer un décalage Bit dans Basique </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88205.html" title="Les spécifications pour une carte graphique ATI Sapphire X1550 " target="_self">Les spécifications pour une carte graphique ATI Sapphi…</a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE"> <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">articles en vedette </td> </tr> </table> <table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87982.html" title="Explication de XBLite " target="_self">Explication de XBLite </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87651.html" title="Les avantages de ces héritages " target="_self">Les avantages de ces héritages </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/cc-programming/86004.html" title="Comment coder un économiseur d'écran " target="_self">Comment coder un économiseur d'écran </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/95990.html" title="Visuels Outils de réseau de base " target="_self">Visuels Outils de réseau de base </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/88321.html" title="Comment savoir programmation PLC gratuitement " target="_self">Comment savoir programmation PLC gratuitement </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/ruby-programming/94226.html" title="Comment vérifier si une chaîne Ruby a une chaine " target="_self">Comment vérifier si une chaîne Ruby a une chaine </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87033.html" title="Comment communiquer avec une DLL dans un autre processus " target="_self">Comment communiquer avec une DLL dans un autre processu…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/java-programming/90329.html" title="Comment ajouter un JScrollPane à un JFrame " target="_self">Comment ajouter un JScrollPane à un JFrame </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87905.html" title="Comment faire pour supprimer les espaces vides dans SQL " target="_self">Comment faire pour supprimer les espaces vides dans SQL…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/94933.html" title="La différence entre ByVal et ByRef " target="_self">La différence entre ByVal et ByRef </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <table width="980" height="8" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> <table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90> <tr> <td class=bs height=90 align=middle>Copyright © Connaissances Informatiques http://fr.wingwit.com <script language='javascript' src='/ad/201310/1.js'></script></td> </tr> </table> </div> </body> </html>