CSS mapas de imágenes permiten a los desarrolladores colocar puntos calientes dentro de las imágenes que contienen enlaces a otras páginas web . Por ejemplo , un punto caliente puede ser colocado alrededor de la cara de una persona en la imagen que contiene un enlace a su página web personal. Cuando un usuario coloca el puntero del ratón sobre el rostro de la persona que aparece una figura que delimita el área de punto caliente. Creación de un mapa de imagen CSS implica llamar a una imagen en html y luego la creación de los códigos CSS correspondientes entre las etiquetas HTML . En este artículo se muestra cómo se crea un mapa de imágenes de los ojos y la nariz en un retrato de Ginevra de Benci pintado por Leonardo da Vinci. Cosas que necesitará editor de Texto Fotos , tales como el Bloc de notas , Emacs , ConTextMozilla , Explorer u otro navegador
Ver Más instrucciones
Cartografía hacia fuera
1
crear dos vinculados páginas web. En este ejemplo se crea una para los ojos y una para la nariz . La página de ojos se leía " Estos son los ojos " y la página de la nariz se lee "Esta es la nariz. " El código HTML de ejemplo siguiente crea los dos son los ojos < /body> < /html>
2
Crear las etiquetas HTML para la imagen . Abra un documento en blanco y utilice el siguiente código para llamar a la imagen del directorio. Usted tendrá que cambiar el nombre y las especificaciones del tamaño de la imagen : html head
Face < /title> <div id="image"> < img src = " da_vinci . jpg " width =" "height = " 550 425 "/> < /div > < /body> < /html> <br> 3 <p> Añadir enlaces a las imágenes dentro de un desordenada tag lista. Para añadir los enlaces coloque el código siguiente entre la imagen y las etiquetas de división : <ul> <li class="d_eyes"> <a href="eyes.html" title = "eyes"> ojos < /a> <li class="d_nose"> <a href="nose.html" title = "nose"> nariz < /a> < /li > < /ul > Es posible que desee cambiar el nombres de clase para adaptarse mejor a su imagen . <br> 4 <p> Crea el CSS para la imagen. El siguiente código debe ir entre las etiquetas < /title> y < /head > etiquetas del documento html : <style type="text/css"> # imagen {width : 550px ; altura : 425px ; posición : relativa; } N º de imagen ul {margin : 0 ; padding : 0 ; list-style : none;} puede ajustar los valores como más te guste . Por ejemplo , usted puede optar por añadir un valor para el relleno de imagen. Asegúrese de que la referencia coincide con el nombre div . En este ejemplo se trata de " imagen". Usted puede optar por otro como "imagen" o " foto ", etc <br> 5 <p> Cree el CSS para los enlaces . El siguiente código CSS sitúa dos puntos calientes separados sobre los ojos y la nariz : N º de imagen d_eyes a. {Position : absolute; ancho : 100px ; altura : 20px ; text-indent : - 1000em ;} N º de imagen d_nose un {position : . Absoluta , ancho : 40px , alto: 20px ; text-indent : - 1000em ; . } º de imagen d_eyes a { top: 140px ; izquierda :; N º de imagen d_nose } a { top 270px : 180px ; izquierda : . , N º de imagen } a 300px : hover {border : 5px sólido # 000000 } < /style> Por supuesto , sus especificaciones varían según su imagen será diferente. Un software de diseño gráfico como Coral Draw o Adobe Photoshop puede proporcionar información sobre la posición de píxel. Sin embargo , siempre se puede encontrar la posición correcta mediante prueba y error así . Guarde la página en el mismo directorio que los otros dos archivos . <br> 6 <p> Prueba el mapa de imagen . Ir al directorio donde se guardan los archivos y haga doble clic en el archivo html que aparezca la imagen. Usted debe ver a su imagen en el explorador . Ejecute el puntero del ratón donde se colocaron los puntos de acceso. Verá aparecer un marco negro. Haga clic dentro del marco y las páginas de referencia se abrirán. <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='/Programacion/computer-programming-languages/88794.html' >¿Quién fue el programador primero </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/computer-programming-languages/88796.html' >Cómo calcular Módulo </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"> Artículos relacionados </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="/Programacion/computer-programming-languages/87010.html" title="Cómo mover ViewState al Final de la Página " target="_self">Cómo mover ViewState al Final de la Página </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87370.html" title="¿Qué es un modificador Static " target="_self">¿Qué es un modificador Static </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88369.html" title="Cómo reiniciar su X Sesión " target="_self">Cómo reiniciar su X Sesión </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87001.html" title="PHP matriz Ordenar Función " target="_self">PHP matriz Ordenar Función </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86375.html" title="Cómo convertir hexadecimal a decimal en MIPS " target="_self">Cómo convertir hexadecimal a decimal en MIPS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88335.html" title="Cómo abrir un TPB " target="_self">Cómo abrir un TPB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88915.html" title="Cómo convertir un binario negativo a Decimal " target="_self">Cómo convertir un binario negativo a Decimal </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86967.html" title="Cómo hacer un Glow Button en ActionScript " target="_self">Cómo hacer un Glow Button en ActionScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86386.html" title="Diferencia entre orientados a bytes de E /S y de caracteres de E /S " target="_self">Diferencia entre orientados a bytes de E /S y de caract…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87578.html" title="Diferencia entre el tiempo de ejecución y tiempo de compilación " target="_self">Diferencia entre el tiempo de ejecución y tiempo de co…</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">Artículos destacados </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="/Programacion/computer-programming-languages/88057.html" title="Cómo calcular los códigos G02 para Mills " target="_self">Cómo calcular los códigos G02 para Mills </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96552.html" title="Cómo ejecutar un programa de Visual Basic en un PC " target="_self">Cómo ejecutar un programa de Visual Basic en un PC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91632.html" title="Cómo extender múltiples plantillas de Smarty " target="_self">Cómo extender múltiples plantillas de Smarty </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/94112.html" title="Cómo aprender Python Online Gratis " target="_self">Cómo aprender Python Online Gratis </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87503.html" title="Cómo ajustar las líneas en Netbeans " target="_self">Cómo ajustar las líneas en Netbeans </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93919.html" title="Cómo convertir Tipo de matriz como flotador Python " target="_self">Cómo convertir Tipo de matriz como flotador Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94292.html" title="Puede Visual Basic Script que escuche en un puerto Telnet " target="_self">Puede Visual Basic Script que escuche en un puerto Teln…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95333.html" title="Tutorial sobre cómo activar el Drag & Drop en Visual Basic 2005 " target="_self">Tutorial sobre cómo activar el Drag & Drop en Visual B…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/85501.html" title="Funciones static void en C " target="_self">Funciones static void en C </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/94012.html" title="Tutorial para Runpy en Python " target="_self">Tutorial para Runpy en Python </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 © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
