Centro de Ayuda:

{

Pagos y Renovaciones
» Cómo pagar
» Aviso de Pago
» Solicitar Factura
» Upgrade/Ampliar Plan

Ayuda Básica
- Mi primera página
- Preguntas Frecuentes
- Videos Tutoriales
- Configurar Email en Outlook?

Email, Webmail, Outlook
- Crear Email
- Configurar Outlook
- Problemas Outlook
- Preguntas Varias Email

Servidores Vps Linux y Windows Chile




Dise√Īo Web HTML Basico


En esta secci√≥n publicamos todos los contenidos que tienen que ver con HTML, como manual de HTML, talleres, servicios, complementos, etc. Disponemos, tal vez, del mejor manual de HTML de la Web en espa√Īol, que trata todos los temas con gran detalle y ofrece cientos de consejos para mejorar nuestras t√©cnicas.



Mapas de im√°genes con HTML


Explicamos detalladamente el proceso para crear mapas de im√°genes, osea, im√°genes que tienes varios enlaces asociados en distintas √°reas.


En capítulos anteriores hemos podido adentrarnos en el elemento básico de navegación del web: El enlace hipertexto. Hemos visto que estos enlaces son palabras, textos o imágenes que, al pinchar sobre ellos, nos envían a otras páginas o zonas.

Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas y funcionan exactamente del mismo modo que los otros enlaces. Podéis ver el funcionamiento de uno en este enlace.

En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurrían a tecnologías de lado del servidor para ser visualizados. Hoy en día pueden ser implementados por medio de código HTML tal y como veremos en este capitulo.

Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. También puede ser muy práctico en mapas geográficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una página.

En cualquier caso, el uso de estos mapas ha de estar sistem√°ticamente acompa√Īado de un texto explicativo que d√© a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen. Frases como "Haz clic sobre tal icono para acceder a tal informaci√≥n" resultan muy indicativas a la hora de hacer intuitiva la navegaci√≥n por los mapas de im√°genes. Por otro lado, no esta de m√°s introducir esa misma explicaci√≥n en el atributo alt de la imagen.

Así pues, un mapa de imagen esta compuesto de dos partes:

  • La imagen propiamente dicha que estar√° situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML.
  • Un c√≥digo, situado en el interior de la etiqueta <map>, que delimitara por medio de l√≠neas geom√©tricas imaginarias cada una de las √°reas de los enlaces presentados en la imagen.
Imagen que ilustra el manejo de coordenadas en im√°genes Las l√≠neas geom√©tricas que delimitan los enlaces, es decir, las √°reas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posici√≥n 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qu√© coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de dise√Īo grafico como Photoshop o Paint Shop Pro.

La mejor forma de explicar el funcionamiento de este tipo de mapas es a partir de un ejemplo pr√°ctico. Supongamos que tenemos una imagen con un mapa como esta:

Pulsa para ver la página de mis amigos Pulsa para ver mi novia Pulsa para conocer a mi Familia Pulsa para conocer mi trabajo Mapa de imágenes. Pulsa en cada una de los círculos.
Pulsa en los círculos para acceder a las secciones!

Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas circulares de peque√Īo tama√Īo que ser√°n distribuidas a lo largo y ancho de la imagen.

Veamos a continuación el código que utilizaremos:

<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Pulsa para ver la p√°gina de mis amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#">
<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="images/html/mapa1.gif" width="380" height="72" alt="Mapa de imágenes. Pulsa en cada una de los círculos." border="0" usemap="#mapa1">
<br>
Pulsa en los círculos para acceder a las secciones!
</td></tr></table>


Nota: Los href de las √°reas van a #
Este es un ejemplo parcial de utilizaci√≥n de los mapas, faltar√≠a colocar los href con valores reales y no con la #. Cada uno de los enlaces de las √°reas -atributo href de la etiqueta <area>- deber√≠an llevar a una p√°gina web. El ejemplo quedar√≠a completo si creasemos todas las p√°ginas donde enlazar las √°reas y colocasemos los href dirigidos hacia dichas p√°ginas. Como no hemos hecho las p√°ginas "destino" hemos colocado enlaces que no llevan a ning√ļn sitio, que, como puedes ver, se indica con el caracter "#".

Podéis observar, tal y como hemos explicado antes, que nuestro mapa consta de dos partes principales: la imagen y la etiqueta <map> que define las áreas de cada enlace.

Cada √°rea se indica con una etiqueta <area>, que tiene los siguientes atributos:

alt
Para indicar un texto que se mostrará cuando situemos el ratón en el área.

shape
Indica el tipo de √°rea.

coords
Las coordenadas que definen el área. Serán un grupo de valores numéricos distintos dependiendo del tipo de área (shape) que estemos definiendo.

href
Para indicar el destino del enlace correspondiente al √°rea.

En este caso hemos utilizado unas √°reas circulares (shape="CIRCLE"), que se definen indicando el centro del c√≠rculo -una coordenada (X,Y) y el radio, que es un n√ļmero entero que se corresponde con el n√ļmero de pixels desde el centro hasta el borde del c√≠rculo.

Tipos de √°reas: shape distintas.

Distintos tipos de √°reas. Shape distintas. Existen tres tipos de √°reas distintas, suficientes para hacer casi cualquier tipo de figura. En el dibujo que acompa√Īa estas l√≠neas se puede ver una representaci√≥n de las √°reas, que detallamos a continuaci√≥n.

shape="RECT"

Crea un área rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como están nombradas dichas coordenadas en nuestro dibujo, el área tendría la siguiente etiqueta:

<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">

shape="CIRCLE"

Crea un área circular, que se indica con la coordenada del centro del círculo y el radio. A la vista de nuestro dibujo, la etiqueta de un área circular tendría esta forma:

<area shape="CIRCLE" coords="X1,Y1,R" href="#">

shape="POLY"

Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los tenemos que indicar en orden, siguiendo el camino marcado por el perímetro del polígono. A la vista del dibujo y los nombres que hemos dado a los puntos del polígono, la etiqueta <area> quedaría de esta forma.

<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">



Indice Frames en HTML »


Tags:   , , Web Hosting , como cambiar el color en una pagina html , crear txt para abrir pag web , mysql cmd , izquierda html , como aprender administrar una base de datos , ejemplo web simple , modelos de esquels para hacer , , precio office , software para poder incluir una campo de texto , nuevo e mail , busco realizar cursos gratis para mi propio negocio , introduccion de un trabajo sobre html , nokia 03-02 , en cmd como activo mysql , configurar correo google apps , registra las compras con html y php , control de ingreso de personal php , , descargar plantillas para hacer menu de restaurante

Planes Incluyen:


  Panel de Control
  Valores y Precios
  Plantillas Web Gratis
  Manuales y Tutoriales
  Asesorías en Dominios
  400 Video Tutoriales

Servicios Web:


  DiseŮo Web
  Diseño de Sitios Web
  Páginas Web
  Programación Web
  Posicionamiento Web
  Mails Google Apps

Soluciones para:


  Plantillas Web
  Buscadores
  Páginas Web Gratis
  Emailing
  E-Commerce
  Web Hosting

 |   Home  |   Faqs  |   Contacto  |

soporte@superhosting.cl
ventas@superhosting.cl
renovaciones@superhosting.cl

Super Hosting Chile 2000 - 2013 ® Todos los Derechos Reservados  -  Condiciones de uso

Parterns:   Supermaq.cl  :   SuperWeb  :   Página Web Gratis  :  Eledos  :  SuperMaq  :  SuperSushi