Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 329

Visitas el mes pasado: 332

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Imágenes (III)

5.3 Mapas de imágenes.

html

Imágenes como enlaces.

Podemos hacer que una imagen nos sirva de enlace, para ello basta con insertar la etiqueta de imagen en el sitio que debe ocupar el texto del enlace.

En algunos navegadores las imágenes de los enlaces se muestran con un borde azul por defecto, para suprimirlo debemos insertar en la etiqueta de imagen el atributo border="0": el código HTML de una imagen de enlace quedará así:.

<a href="http://.... .com"><img src="imágenes/dibujo.gif" alt="dibujo" border="0"/></a>

La mayoría de los navegadores solucionan este problema de forma automática en sus nuevas versiones. Sin embargo navegadores como Internet Explorer, o versiones antiguas de los principales navegadores no lo tienen solucionado y siguen mostrando el borde azul alrededor de las imágenes de enlace.

En el la siguiente página de ejemplo vemos la misma imagen como enlace con el borde azul y sin el borde:

Ver página de ejemplo



Mapa de imagen: concepto

Un mapa de imágenes es una imagen que incorpora varios enlaces, cada uno de ellos en una zona diferente de la imagen.

Aunque no son muy habituales, suelen utilizarse en mapas o en imágenes complejas con varios dibujos o apartados, donde cada apartado nos dirige a una página distinta.

En cualquier caso, el uso de estos mapas ha de estar acompañado de un texto explicativo que dé a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen.


Etiquetas de Mapa de imagen

La composición de un mapa de imagen requiere las siguientes etiquetas:

Una etiqueta de imagen en la que además de los atributos habituales debemos insertar el atributo usemap="#...". Su valor será el nombre que le pongamos al mapa de imágenes. debemos poner el signo # (almohadilla) delante del nombre (al igual que en los enlaces internos), por defecto se muestra un borde azul alrededor de la imagen, por lo que debemos insertar el atributo border="0" si queremos eliminarlo. El código quedará así:

<img src="..." alt="..." usemap="#nombre" border="0"/>

Una etiqueta <map>....</map> que indica el principio y el final del código del mapa de imágenes. Esta etiqueta debe llevar el atributo name="nombre" El valor de este atributo debe ser el mismo valor que el del atributo usemap de la etiqueta, <img>pero sin la almohadilla (sin el signo #).

<map name="nombre">

Dentro de la etiqueta <map>....</map> insertaremos las etiquetas <area.../>. Estas etiquetas no tienen etiquetas de cierre, y pondremos una por cada enlace que queramos incluir dentro del mapa de imagen. Llevan varios atributos obligatorios que son los que indican la dirección del enlace y el área de la imagen que le corresponde. Estos atributos son:

Además de estos atributos obligatorios, podemos insertar otros atributos: El atributo alt="texto" , que funciona igual que en las imágenes. El atributo nohref="nohref", que siempre tiene el mismo valor, y que sustituye al atributo href cuando el área no quiere ser seleccionada. Al igual que en los enlaces, podemos usar el atributo target="_blank" para abrir la página en otra pestaña del navegador.


Coordenadas de un área

Los números que debemos insertar en el atributo coords dependen del tipo de área (marcada en el atributo shape). Indican las coordenadas medidas en píxeles de los puntos de referencia que delimitan el área. El punto de origen de coordenadas es siempre el ángulo superior izquierda de la imagen.

Para hayar los números de las coordenadas que corresponden a un punto concreto , lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro o Igraf Image.


Ejemplo de mapa de imágenes

A continuación se muestra un ejemplo de mápa de imágenes con un sencillo dibujo, debajo de él mostramos también el código fuente del mismo.


Mapa de imágenes ir a la introduccion del manual ir a la página principal ir a la página anterior ir a la página siguiente

Código fuente del mapa de imágenes anterior:

<img src="objetos/mapa.gif" alt="Mapa de imágenes" usemap="#enlaces" border="0"/>        
<map name="enlaces">
   <area alt="ir a la introduccion del manual" shape="rect" coords="36,36,124,124" 
         href="index.php" target="_blank" />
   <area alt="ir a la página principal" shape="circle" coords="80,172,44" 
         href="../index.php" target="_blank" />
   <area alt="ir a la página anterior" shape="rect" coords="150,35,312,108" 
         href="html5_2.php" target="_blank" />
   <area alt="ir a la página siguiente" shape="poly" coords="162,130,162,216,312,216" 
         href="html5_4.php" target="_blank" />
</map>    

Observa cómo para cada elemento de la imagen hemos puesto una etiqueta area. Dentro de cada area hemos hecho coincidir su espacio con un elemento del dibujo, dandole forma mediante el atributo shape e indicando las coordenadas mediante el atributo coords.




En la siguiente página veremos como insertar imágenes de fondo y otros atributos para imágenes

Más sobre imágenes



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com