|
|
|
| Cómo crear un mapa de imágenes con programación HTML |
|
Comprender HTML es uno de los lenguajes de programación más recursos a utilizar para la construcción de una página web. HTML utiliza etiquetas para agregar atributos a sus páginas web . Las cuatro etiquetas más usadas por los documentos HTML son , , y <BODY ...> . Estas etiquetas definen el tipo de documento que es, y las secciones principales . Documentos HTML suelen tener la extensión . HTML o . Htm . Puedes usar HTML para crear un mapa de imagen que divide una imagen en diferentes áreas que enlazan con una página web diferente. Si opta por crear mapas de imagen , debe utilizar las imágenes que tienen varias zonas diferenciadas que los lectores puedan seleccionar. Las fotografías no suelen ser una buena opción para los mapas de imagen . Creación de mapas de imágenes es una buena manera de dar a sus páginas más atractivo . Esta guía te enseñará cómo agregar mapas de imágenes a su página. Se presenta un método muy simple para personalizar su página. Cosas que necesitará de computadora <br> Mostrar más instrucciones <br> 1 <p> Inicie su procesador de textos o editor de texto que va a utilizar para crear su página web. Busque la página en su PC que va a editar . Añadir la imagen que desea utilizar un mapa de imagen a su página web. Incluir dentro de la etiqueta <CENTER> . <br> 2 <p> Type " USEMAP =" #? "Dentro de la etiqueta <IMG> . Sustituya el signo de interrogación con el nombre de la imagen del mapa. Escriba " </CENTER >" para cerrar la etiqueta . <br> 3 <p> Type " <MAP NAME="?"> "Reemplazar el signo de interrogación con la imagen nombre del mapa Su texto debe tener el siguiente aspecto : . <CENTER> <IMG SRC="name.gif" USEMAP="#menumap"> ; ? < /CENTER> <MAP NAME="menumap"> <br> 4 <p> Escriba " < AREA SHAPE =" " " Vuelva a colocar la signo de interrogación con la forma de la zona. Utilice rect de rectángulo, círculo de círculo y poli de una forma irregular. <br> 5 <p> Type " COORDS =" a , b, c , d & # x201D , "porque las coordenadas de un rectángulo Reemplace el . " a y B ", con las coordenadas de la esquina superior izquierda reemplazar. " cyd " con las coordenadas de la esquina inferior derecha para un círculo , el tipo ". COORDS = & # x201C ; a, b , r " ", donde " a, b " son las coordenadas del centro del círculo y " r " . es el radio para un polígono , tipo " COORDS = " a, b , c, d ... "," dónde "a, b , c, d" son las coordenadas de cada punto en el polígono. <br> 6 <p> Type " HREF =" ? " ". Sustituir el signo de interrogación con la dirección de la página web que desea que el área de la imagen a enlazar. Repita los pasos 4 a 6 para cada área de la imagen . Tipo " < /MAP >" para completar su mapa de imagen . <br> 7 <p> Compruebe que el texto es similar al siguiente : < AREA SHAPE " rect " COORDS = " 31,50,155,120 " HREF = & # x201C ; website.html "> < /MAP > <br> 8 <p> Abrir un nuevo navegador web para verificar que su página web muestra el mapa de imagen correctamente Pruebe su sitio y verificar que los visitantes pueden. Haga clic en una zona del mapa en la imagen para acceder a la página web enlazada. <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/88867.html' >Cómo cambiar el estilo de viñeta Uso de la programación HTML </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/computer-programming-languages/88869.html' >Cómo cambiar la caja de texto usando programación HTML </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/86289.html" title="Desarrollo Componentes iPhone " target="_self">Desarrollo Componentes iPhone </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86733.html" title="Cómo hacer un tema DotNetBar de mensajes " target="_self">Cómo hacer un tema DotNetBar de mensajes </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86974.html" title="Cómo vincular las propiedades de objeto a un FormView " target="_self">Cómo vincular las propiedades de objeto a un FormView </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87263.html" title="¿Qué es Microsoft WPF " target="_self">¿Qué es Microsoft WPF </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86941.html" title="Cómo capturar todas las excepciones Datagrid " target="_self">Cómo capturar todas las excepciones Datagrid </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87397.html" title="Cómo utilizar un ratón en sus programas QBASIC " target="_self">Cómo utilizar un ratón en sus programas QBASIC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87486.html" title="Cómo quitar los blancos de cola en el extremo de una línea de texto en un script de shell " target="_self">Cómo quitar los blancos de cola en el extremo de una l…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88617.html" title="Cómo hacer Banners Terror Gratis " target="_self">Cómo hacer Banners Terror Gratis </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86968.html" title="¿Qué es la programación de matriz " target="_self">¿Qué es la programación de matriz </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86325.html" title="Diferencia entre autómatas finitos deterministas y no deterministas " target="_self">Diferencia entre autómatas finitos deterministas y no …</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/javascript-programming/91207.html" title="Cómo configurar el fondo de animación en una página Web " target="_self">Cómo configurar el fondo de animación en una página …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91838.html" title="Cómo leer un archivo XML con PHP 4 Script " target="_self">Cómo leer un archivo XML con PHP 4 Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94545.html" title="Cómo convertir una cadena a INT en ASP clásico " target="_self">Cómo convertir una cadena a INT en ASP clásico </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96492.html" title="Cómo leer los puertos serie con Visual Basic " target="_self">Cómo leer los puertos serie con Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88636.html" title="DirectX 9 vs. 10 " target="_self">DirectX 9 vs. 10 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96320.html" title="Tipos de datos de Visual Basic " target="_self">Tipos de datos de Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90508.html" title="Cómo aprender Java 6 " target="_self">Cómo aprender Java 6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88800.html" title="Cómo utilizar OPL " target="_self">Cómo utilizar OPL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92248.html" title="Cómo ocultar un cuadro combinado en PHP " target="_self">Cómo ocultar un cuadro combinado en PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93617.html" title="Cómo controlar un shell de Unix con Python " target="_self">Cómo controlar un shell de Unix con 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>
| | |
