CSS bildkartor tillåter utvecklare att placera hotspots inom bilder som innehåller länkar till andra webbsidor . Till exempel kan en hot spot placeras runt ansiktet på en person i bilden som innehåller en länk till sin personliga webbsida . När en användare placerar muspekaren över personens ansikte en form visas som delineates hot spot området . Skapa ett CSS bildkarta innebär ringa en bild i html och sedan inrätta motsvarande CSS -koder mellan html taggarna
. Detta artiklar visar hur man gör en bild karta över ögon och näsa på ett porträtt Ginevra de Benci målad av Leonardo da Vinci . Saker du behöver
textredigerare , till exempel Anteckningar , Emacs , ConTextMozilla , Explorer eller annan webbläsare
Visa fler instruktioner
Mapping It Out
1
skapa två länkade webbsidor . I detta exempel skapas en för ögat och ett för näsan . Ögonen sida kommer att läsa " Det är ögonen " och nosen sidan kommer att läsa " Detta är näsan . " Provet html nedan skapar två är Skapa ögonen ! < /h1 > < /body> < /html >
2
HTML-taggar för bilden . Öppna ett tomt dokument och använda följande kod för att ringa bilden från katalogen . Du kommer att behöva ändra namn och specifikationer storlek på din bild :
Face < /title > <div id="image"> < img src = " da_vinci . jpg " width = " 550 " height = " 425 " /> < /div > < /body> < /html > Addera 3 <p> Lägg till länkar till bilderna i en oordnad lista taggen . För att lägga till länkarna placera följande kod mellan bilden och taggarna division : <ul> <li class="d_eyes"> <a href="eyes.html" title = "eyes"> ögon < /a > <li class="d_nose"> <a href="nose.html" title = "nose"> näsan < /a > < /li > < /ul > Du kanske vill ändra klassnamn för att bättre passa din bild . <br> 4 <p> Skapa CSS för bilden . Följande kod måste gå mellan < /title > och < /head > taggarna på HTML-dokument : <style type="text/css"> # image { width : 550px ; höjd : 425px ; ställning : släkting ; } # image ul {margin : 0 ; padding : 0 ; list-style : none; } du kan justera värdena men du gillar . Till exempel kan du välja att lägga ett värde för bilden stoppning . Se till att hänvisningen matchar div namn. I detta exempel är det "bild . " Du kan välja en annan som " bild " eller " pic " etc. <br> 5 <p> Skapa CSS för länkarna . Följande CSS-kod placerar två separata hot spots över ögon och näsa : # bilden d_eyes en . { Position: absolute ; width : 100px ; höjd : 20px ; text -indent : - 1000em ; } # image d_nose en { ställning : . Absolut , width : 40px ; höjd : 20px ; text -indent : - 1000em ; . } # bild d_eyes en { top : 140px ; vänster : 270px ; } # bild d_nose a { top : 180px ; vänster : . 300px ; } # avbildar en : hover { border : 5px solid # 000000 } < /style > Naturligtvis kommer dina specifikationer variera som din bild kommer att vara annorlunda . En grafisk design mjukvara som Coral Draw eller Adobe Photoshop kan ge pixelpositionen information. Men du kan alltid hitta rätt position genom trial and error liksom . Spara sidan i samma katalog som de andra två filerna . <br> 6 <p> Testa Image kartan . Gå till den katalog där filerna sparas och dubbelklicka på HTML- filen där bilden visas . Du bör se din bild i webbläsaren . Kör din mus där hotspots placerades . Du kommer att se en svart ram visas . Klicka inuti ramen och de referensnivåer sidorna öppnas . <br> <br>
<div class=dad2><script language='javascript' src='http://www.dator.xyz/ad/201310/4.js'></script></div>
<div class=dad3><script language='javascript' src='http://www.dator.xyz/ad/201310/33.js'></script></div>
</div>
</td>
</tr>
</table>
<table class=dhang1 bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<div class=dhang7></div>
<table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/computer-programming-languages/88794.html' >Vem var den 1: a programmerare </a></li></p></td>
</tr>
<tr>
<td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/computer-programming-languages/88796.html' >Hur man beräknar Modulus </a></li></td>
</tr>
</table></td>
</tr>
</table>
<div class=dhang7></div>
<table class=s770x246 >
<tr>
<td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table class=c1 >
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/computer-programming-languages/88087.html" title="Hur man skapar ett slumpmässigt heltal i Ada " target="_self">Hur man skapar ett slumpmässigt heltal i Ada </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87249.html" title="Hur får fältnamn från en datamängd " target="_self">Hur får fältnamn från en datamängd </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86457.html" title="FCM kod i MATLAB " target="_self">FCM kod i MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87748.html" title="Hur att stänga av varningar i VBScript " target="_self">Hur att stänga av varningar i VBScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87368.html" title="Konvertera Decimaler till Signerad Binaries " target="_self">Konvertera Decimaler till Signerad Binaries </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86413.html" title="Konvertera Rekursiv att Iterativ " target="_self">Konvertera Rekursiv att Iterativ </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88044.html" title="Hur konvertera HTML taggar med Plain Text i C # " target="_self">Hur konvertera HTML taggar med Plain Text i C # </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87968.html" title="Hur man skapar Font Processing " target="_self">Hur man skapar Font Processing </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88104.html" title="Hur man trycka på knappar i Batch File " target="_self">Hur man trycka på knappar i Batch File </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87858.html" title="Lägga till Slow Motion till WMP " target="_self">Lägga till Slow Motion till WMP </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 class=c3 >
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Utvalda artiklarna </td>
</tr>
</table>
<table class=c4 >
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86387.html" title="Hur Uppskatta Transfer Functions fysikaliska system i MATLAB " target="_self">Hur Uppskatta Transfer Functions fysikaliska system i M…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91197.html" title="Javascript Timer Tutorial " target="_self">Javascript Timer Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95449.html" title="Hur man skriver ett program i Visual Basic som kommer Utgång Voices " target="_self">Hur man skriver ett program i Visual Basic som kommer U…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88148.html" title="Net Architecture Certifiering " target="_self">Net Architecture Certifiering </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95581.html" title="Hur man använder Pivot Table Logic " target="_self">Hur man använder Pivot Table Logic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93449.html" title="Vad Är Python 2.6 Interpreter Path " target="_self">Vad Är Python 2.6 Interpreter Path </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86463.html" title="Hur man beräknar THD i MATLAB " target="_self">Hur man beräknar THD i MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87112.html" title="Hur man använder parametrar i SSIS " target="_self">Hur man använder parametrar i SSIS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85270.html" title="Hur man kompilerar Flex till iPhone " target="_self">Hur man kompilerar Flex till iPhone </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94569.html" title="Vad är UBound i VB " target="_self">Vad är UBound i VB </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div class=dhang8></div>
<div class=dhang1></div>
<table class=b1>
<tr>
<td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz
</td>
</tr>
</table>
<div class=dhang1></div>
</div>
</body>
</html> 