CSS image maps kunnen ontwikkelaars hot spots plaatsen in afbeeldingen die links naar andere webpagina's bevatten . Bijvoorbeeld , kan een hot spot in het gezicht van een persoon in de afbeelding die een link naar hun persoonlijke webpagina bevat geplaatst worden . Wanneer een gebruiker de muis plaatst over de persoon het gezicht van een vorm zal verschijnen dat de hot spot gebied omlijnt . Het maken van een CSS image map gaat roepen een beeld in html en vervolgens het opzetten van de bijbehorende CSS- codes tussen de html tags. Deze artikelen wordt getoond hoe u een afbeelding kaart van de ogen en de neus op een portret Ginevra de Benci geschilderd door Leonardo da Vinci te maken . Wat je nodig hebt
tekst editor , zoals Notepad , Emacs , ConTextMozilla , Explorer of een andere browser
Toon Meer Aanwijzingen
Mapping It Out
1 Create twee gekoppelde webpagina's . Dit voorbeeld maakt een voor de ogen en een voor de neus . De pagina ogen zullen lezen " Dit zijn de ogen " en de neus pagina leest " Dit is de neus . " Het monster html hieronder creëert de twee zijn de ogen < /h1 > < /body > < /html >
2 ! Maak de html- tags voor de afbeelding . Open een leeg document en gebruik de volgende code om de afbeelding te bellen uit het telefoonboek . U moet de naam en de grootte specificaties van uw afbeelding te wijzigen : gezicht < /title > <div id="image"> < img src = " da_vinci . jpg "width = " 550 " height = " 425 " /> < /div > < /body > < /html > <br> 3 <p> koppelingen toevoegen aan de afbeeldingen binnen een ongeordende lijst tag . Aan de links toe te voegen plaatst u de volgende code tussen de afbeelding en de verdeling tags: <ul> <li class="d_eyes"> <a href="eyes.html" title = "eyes"> ogen < /a > <li class="d_nose"> <a href="nose.html" title = "nose"> neus < /a > < /li > < /ul > U kunt het wijzigen klasse namen aan te passen aan uw imago . <br> 4 <p> Maak de CSS voor de afbeelding . De volgende code moet gaan tussen de < /title > en de < /head > tags van de HTML-document : <style type="text/css"> # afbeelding { width : 550px ; height : 425px ; positie : relatief; } # image ul { margin : 0 ; padding : 0 ; list-style : none ; } u kunt de waarden maar je wilt aanpassen. Bijvoorbeeld , kunt u ervoor kiezen om een waarde voor het opvullen voegen . Zorg ervoor dat de verwijzing overeenkomt met de naam van div . In dit voorbeeld is het ' imago . " U kunt een andere als " beeld " of " foto " enz. <br> 5 <p> Maak de CSS voor de banden te kiezen . De volgende CSS- code situeert twee afzonderlijke hot spots over de ogen en neus : # afbeelding d_eyes een . { Position: absolute ; width : 100px ; height : 20px ; text-indent : - 1000em ; } # afbeelding d_nose een {position : . Absolute , width : 40px ; height : 20px ; text-indent : - 1000em ; . } # afbeelding d_eyes een { top : 140px ; left: 270px ; } # afbeelding d_nose een { top : 180px ; links : . 300px ; } # beeld : hover { border : 5px solid # 000000 } < /style > Natuurlijk , zal uw specificaties afwijken als uw afbeelding zal anders zijn . Een grafisch ontwerp software zoals Coral Draw of Adobe Photoshop kan pixelpositie informatie verstrekken . Echter , kunt u altijd de juiste positie door trial and error ook. Sla de pagina in dezelfde map als de andere twee bestanden . <br> <p> Test 6 de kaart afbeelding . Ga naar de map waar de bestanden worden opgeslagen en dubbelklik op het html-bestand waar de foto wordt weergegeven . Je moet je foto te zien in de browser . Run je muis waar de hotspots werden geplaatst . U ziet een zwart kader verschijnen . Klik in het frame en de referentie- pagina wordt geopend . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/computer-programming-languages/201309/88794.html' >Wie was de 1ste computer programmeur ? </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/computer-programming-languages/201309/88796.html' >Hoe te Modulus berekenen </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Computer Programming Languages</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86350.html" title="Hoe maak je tijd in UML lezen " target="_self">Hoe maak je tijd in UML lezen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87186.html" title="Definitie van hiërarchische Database " target="_self">Definitie van hiërarchische D…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88042.html" title="Hoe te Browser Build Games " target="_self">Hoe te Browser Build Games </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87276.html" title="Hoe te Waarden Van ListBox Krijg tot Verstuur naar SQL " target="_self">Hoe te Waarden Van ListBox Kri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88437.html" title="Wat is streng type controleren ? " target="_self">Wat is streng type controleren…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87929.html" title="Hoe te Klassen voor Air Traffic Control System Met behulp van UML Identificeer " target="_self">Hoe te Klassen voor Air Traffi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86989.html" title="Hoe maak je een JavaScript -functie Van Python Bel " target="_self">Hoe maak je een JavaScript -fu…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87546.html" title="Wat zijn de voordelen en nadelen van Grid - Based Design ? " target="_self">Wat zijn de voordelen en nadel…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87427.html" title="Hoe te Cocoa Apps " target="_self">Hoe te Cocoa Apps </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89110.html" title="Hoe te Willekeurig Cycle Afbeeldingen Met Java " target="_self">Hoe te Willekeurig Cycle Afbeeldingen Me…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95213.html" title="Hoe de huidige toepassing in Visual Basic 6.0 Beëindigen " target="_self">Hoe de huidige toepassing in Visual Basi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86568.html" title="Hoe Is UML anders dan andere Modeling ? " target="_self">Hoe Is UML anders dan andere Modeling ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/93087.html" title="Hoe te beginnen en Clear een sessie in PHP " target="_self">Hoe te beginnen en Clear een sessie in P…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94740.html" title="Hoe te ListView gebruiken Met een CheckBox in VBA " target="_self">Hoe te ListView gebruiken Met een CheckB…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88419.html" title="Hoe SQL Variabelen gebruiken in Oracle " target="_self">Hoe SQL Variabelen gebruiken in Oracle </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89497.html" title="Hoe te Regelnummering bekijken in JCreator " target="_self">Hoe te Regelnummering bekijken in JCreat…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91227.html" title="Hoe om te controleren een website voor een webbrowser Bug " target="_self">Hoe om te controleren een website voor e…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86942.html" title="Hoe kan ik een code bestand dat in de Application Data map gebruiken ? " target="_self">Hoe kan ik een code bestand dat in de Ap…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
