mappe immagine CSS consentono agli sviluppatori di inserire i punti caldi all'interno di immagini che contengono link ad altre pagine web. Ad esempio , un punto caldo può essere posizionato intorno al viso di una persona ad immagine che contiene un link alla loro pagina web personale . Quando un utente posiziona il mouse sopra il viso della persona una forma appare che delinea l'area hot spot . Creazione di una mappa immagine CSS comporta chiamando un'immagine in html e poi creare i corrispondenti codici CSS tra i tag html. In questo articolo viene illustrato come creare una mappa immagine degli occhi e il naso su un ritratto di Ginevra de Benci dipinta da Leonardo da Vinci . Cose che ti serviranno
editor di testo , come Blocco note , Emacs , ConTextMozilla , Explorer o altro browser
Mostra più istruzioni
Mappatura It Out
1
creare due legata pagine web. Questo esempio crea una per gli occhi e uno per il naso . La pagina di occhi si legge "Questi sono gli occhi " e la pagina del naso viene letto "Questa è il naso . " Il codice HTML di esempio crea due sono gli occhi ! < /h1 > < /body> < /html >
2
Creare i tag html per l'immagine . Aprire un documento vuoto e utilizzare il seguente codice per richiamare l'immagine dalla directory . Si dovrà cambiare il nome e le specifiche dimensioni della vostra immagine :
Face < /title> <div id="image"> < img src = " da_vinci . jpg "width = " 550 " height = " 425 " /> < /div > < /body> < /html > <br> 3 <p> Aggiungere collegamenti alle immagini all'interno di un non ordinata tag lista. Per aggiungere i link inserire il seguente codice tra l'immagine e il tag divisione : <ul> <li class="d_eyes"> se si href="eyes.html" title = "eyes"> occhi < /a> <li class="d_nose"> <a href="nose.html" title = "nose"> naso < /a> < /li> < /ul > Si consiglia di cambiare la nomi di classe per soddisfare meglio le tue immagini. <br> 4 <p> Creare il CSS per l'immagine . Il seguente codice deve andare tra la < /title> e < /head> del documento html : <style type="text/css"> # immagine {width : 550px ; height: 425px ; posizione : relative;} # immagine ul {margin : 0 ; padding: 0; list-style : none; } è possibile regolare i valori come più vi piace . Ad esempio, è possibile scegliere di aggiungere un valore per imbottitura immagine . Assicurarsi che il riferimento corrisponde al nome del div . In questo esempio è "immagine ". Si può scegliere un altro come " immagine" o " pic" ecc <br> 5 <p> Creare il CSS per i link . Il seguente codice CSS colloca due punti caldi distinti sopra gli occhi e il naso : # immagine d_eyes a. { Position: absolute; width : 100px ; height: 20px; text -indent : - 1000em ; } # immagine d_nose una {position : . Assoluta , width: 40px ; height: 20px; text-indent : - 1000em ; . } # immagine d_eyes una {top : 140px ; sinistra : 270px ; } # { immagine d_nose superiore a : 180px ; sinistra : . 300px ; } # immagine di un : hover {border : 5px solid # 000000 } < /style > ovviamente , le vostre specifiche varieranno come la vostra immagine sarà diverso . Un software di progettazione grafica come Coral Draw o Adobe Photoshop in grado di fornire informazioni sulla posizione dei pixel . Tuttavia, si può sempre trovare la posizione corretta per tentativi ed errori pure. Salvare la pagina nella stessa directory degli altri due file . <br> 6 <p> prova la mappa immagine . Passare alla directory in cui sono salvati i file e fare doppio clic sul file html in cui appare l'immagine . Si dovrebbe vedere la tua foto nel browser. Esegui il mouse dove sono stati collocati i punti caldi . Vedrete apparire una cornice nera . Fare clic all'interno della cornice e le pagine di riferimento si apriranno . <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='/Programmazione/computer-programming-languages/88794.html' >Chi è stato il primo computer Programmatore ? </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/computer-programming-languages/88796.html' >Come calcolare Modulo </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"> Articoli Correlati </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="/Programmazione/computer-programming-languages/86503.html" title="Gli svantaggi di Normalizzazione " target="_self">Gli svantaggi di Normalizzazione </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88779.html" title="Scrum Metodologia " target="_self">Scrum Metodologia </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88210.html" title="Come cercare un Hex in DB2 SQL " target="_self">Come cercare un Hex in DB2 SQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88231.html" title="Come usare un Mux per implementare una equazione logica " target="_self">Come usare un Mux per implementare una equazione logica…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86770.html" title="Come lavorare con sprite in AS3 " target="_self">Come lavorare con sprite in AS3 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88356.html" title="Come scrivere una relazione OEM " target="_self">Come scrivere una relazione OEM </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87885.html" title="Che cosa sono i simboli del diagramma di flusso ? " target="_self">Che cosa sono i simboli del diagramma di flusso ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86821.html" title="Come fare un contatore in ActionScript " target="_self">Come fare un contatore in ActionScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87028.html" title="Come utilizzare SVN con BuddyPress " target="_self">Come utilizzare SVN con BuddyPress </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86381.html" title="Come creare un Preloader FLV in AS3 " target="_self">Come creare un Preloader FLV in AS3 </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">Articoli in evidenza </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="/Programmazione/python-programming/93864.html" title="Procedura: Python utilizzando le API di Twitter " target="_self">Procedura: Python utilizzando le API di Twitter </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94539.html" title="Funzioni VBA Dollar -signed " target="_self">Funzioni VBA Dollar -signed </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88186.html" title="Come prova di Business Objects " target="_self">Come prova di Business Objects </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87222.html" title="Come fare Exit Splash in PHP " target="_self">Come fare Exit Splash in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92380.html" title="Come reimpostare le variabili di array in PHP " target="_self">Come reimpostare le variabili di array in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/python-programming/93859.html" title="Tutorial per Livewires Python " target="_self">Tutorial per Livewires Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/perl-programming/93328.html" title="Come rimuovere Perl Newline " target="_self">Come rimuovere Perl Newline </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87625.html" title="Come fare Sovrapposizione CSS div muovono insieme " target="_self">Come fare Sovrapposizione CSS div muovono insieme </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89119.html" title="Come fare un'animazione utilizzando Java " target="_self">Come fare un'animazione utilizzando Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/90601.html" title="Nucleo Java Tutorials " target="_self">Nucleo Java Tutorials </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 © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 