Cuando hablamos de mapas de imágenes, hablamos de imágenes sensibles. Estas son las que contienen zonas activas que funcionarán como enlaces.
Este tipo de mapas se pueden procesar en dos puntos, en el servidor donde tenemos alojada nuestra página, lado del servidor (ismap) o en el ordenador donde se abra la página web, lado del cliente (usemap)
Lo más común es que el procesado se realice en el lado del cliente:
En primer lugar realizamos el mapeo, definimos dicho mapa dentro de una imagen
añadiendo una almohadilla delante del nombre de la siguiente manera:
<img usemap="#ejemplo" />
A continuación definimos el nombre del mapa con la etiqueta:
<map name="ejemplo">...</map>
Entre la etiqueta de apertura y la de cierre introduciremos todas las zonas activas mediante una etiqueta por zona activa. Estas zonas activas pueden ser cuadrados, circunferencias o polígonos. Sus etiquetas en este orden serian las siguientes:
Zona rectangular desde un punto (x1,y1) al punto opuesto en su diagonal (x2,y2)
<area shape="rect" coords="x1,y1,x2,y2" href="" alt"" />
Zona circular desde un punto (x,y) tomando como radio (r)
<area shape="circle" coords="x,y,r" href="" alt"" />
Zona poligonar insertando de forma seguida todos los puntos que componen dicho polígono mediante coordenadas (x,y)
<area shape="poly" coords="x1,y1,x2,y2, ... ,xn,yn" href="" alt"" />
Un ejemplo completo sería el siguiente:
<img src="imagen.png" width="100" heigth="100" usemap="#ejemplo" />
<map name="ejemplo">
<area shape="rect" coords="10,10,40,40" href="rectangulo.html" alt"esto es un rectangulo" />
<area shape="circle" coords="80,80,2" href="circulo.html" alt"esto es un circulo" />
<area shape="poly" coords="10,45,10,60,80,60" href="poligono.html" alt"esto es un poligono" />
</map>
lunes, 29 de octubre de 2012
viernes, 26 de octubre de 2012
HTML Imagenes
Como gestionar imágenes en páginas webs
Cuando hablamos de imágenes en la web estamos hablando de hipermedia
Atributos obligatorios en XHTML 1.0
- src (ruta de la imagen)
- alt (texto que aparece cuando la imagen aún no se ha cargado o no se puede cargar)
<img src="img/imagen.gif" alt="esta es la imagen mostrada">...</img>
Atributos opcionales
- width y height (proporciona ancho y alto)
- long desc (ruta donde se proporciona una descripción larga de la imagen)
- ismap y usemap (para definir mapas de imagen)
Atributos obsoletos (desaconsejados, utilizar css en su lugar)
- align
- border
- hspace
- vspace
Queda también desaconsejado usar imagenes de fondo con
<body background="">
<table background="">
Se puede usar imagenes al mismo directorio y a otras páginas
Formatos de imágenes para el uso en webs (Los tres primeros son los más usuales)
jpeg
gif (incluidos animados)
png
apng (requiere Gecko 1.9.2)
svg (requiere Gecko 2.0)
bmp
bmp ico
png ico (requiere Gecko 9.0)
Cuando hablamos de imágenes en la web estamos hablando de hipermedia
Atributos obligatorios en XHTML 1.0
- src (ruta de la imagen)
- alt (texto que aparece cuando la imagen aún no se ha cargado o no se puede cargar)
<img src="img/imagen.gif" alt="esta es la imagen mostrada">...</img>
Atributos opcionales
- width y height (proporciona ancho y alto)
- long desc (ruta donde se proporciona una descripción larga de la imagen)
- ismap y usemap (para definir mapas de imagen)
Atributos obsoletos (desaconsejados, utilizar css en su lugar)
- align
- border
- hspace
- vspace
Queda también desaconsejado usar imagenes de fondo con
<body background="">
<table background="">
Se puede usar imagenes al mismo directorio y a otras páginas
Formatos de imágenes para el uso en webs (Los tres primeros son los más usuales)
jpeg
gif (incluidos animados)
png
apng (requiere Gecko 1.9.2)
svg (requiere Gecko 2.0)
bmp
bmp ico
png ico (requiere Gecko 9.0)
miércoles, 24 de octubre de 2012
HTML Enlaces o hipervinculos
Dentro del Hipertexto tenemos 3 bloques
El enlace
<a href="#nombre">...</a>
El destino
<a name="#nombre">...</a> (Antiguo método)
<h1 id="#nombre">...</h1> (Actualmente)
<p id="#nombre">...</p> (Actualmente)
Es decir, primero definimos un elemento llamado "nombre" y luego agregamos los enlaces a ese elemento.
Hay que recordar que varios enlaces pueden llevar a un destino, pero no varios destinos con el mismo nombre.
Los enlaces extradocumentales son los más conocidos, son los enlaces a otras páginas webs, pero tenemos más opciones de las que quizás creamos tener.
<a href="pagina.html">...</a>
donde pagina.html es la URL(Uniform Resource Locator) de la pagina a la que queremos vincularnos.
Este código es para ir a un elemento de otra página, algo que también nos puede llegar a resultar muy útil.
<a href="pagina.html#nombre">...</a>
Por último el siguiente código nos servirá para enlazar otros servicios como el usual "mailto:pepito@ejemplo.es"
<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/recurso
- Nodos o secciones
- Anclajes
- Enlaces, hiperenlaces o hipervínculos
- Intradocumentales
- Extradocumentales
El enlace
<a href="#nombre">...</a>
El destino
<a name="#nombre">...</a> (Antiguo método)
<h1 id="#nombre">...</h1> (Actualmente)
<p id="#nombre">...</p> (Actualmente)
Es decir, primero definimos un elemento llamado "nombre" y luego agregamos los enlaces a ese elemento.
Hay que recordar que varios enlaces pueden llevar a un destino, pero no varios destinos con el mismo nombre.
Los enlaces extradocumentales son los más conocidos, son los enlaces a otras páginas webs, pero tenemos más opciones de las que quizás creamos tener.
<a href="pagina.html">...</a>
donde pagina.html es la URL(Uniform Resource Locator) de la pagina a la que queremos vincularnos.
Este código es para ir a un elemento de otra página, algo que también nos puede llegar a resultar muy útil.
<a href="pagina.html#nombre">...</a>
Por último el siguiente código nos servirá para enlazar otros servicios como el usual "mailto:pepito@ejemplo.es"
<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/recurso
Suscribirse a:
Entradas (Atom)