Anterior Índice Siguiente

Tema 5 - IMÁGENES

 

 <IMG> IMAGEN

SRC y ALT

     <IMG  SRC="URI de la Imagen"  ALT="Texto alternativo a la imagen">

    

ALIGN  -  Alineación de la imagen

Ejemplos
Inst.
HTML
<IMG SRC="Imagenes/phone5.gif" ALIGN="top"><B>N&uacute;mero de Tel&eacute;fono.</B> En este apartado se indica el n&uacute;mero de tel&eacute;fono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Número de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
Como se ve sólo aparece la primera frase alineada en la parte alta (TOP) de la imagen.
Inst.
HTML
<IMG SRC="Imagenes/phone5.gif" ALIGN="middle"><B>N&uacute;mero de Tel&eacute;fono.</B> En este apartado se indica el n&uacute;mero de tel&eacute;fono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Número de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este caso el texto está alineado en la parte central de la imagen.
Inst.
HTML
<IMG SRC="Imagenes/phone5.gif" ALIGN="bottom"><B>N&uacute;mero de Tel&eacute;fono.</B> En este apartado se indica el n&uacute;mero de tel&eacute;fono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Número de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
El texto está alineado en la parte baja de la imagen.
Inst.
HTML

<IMG SRC="Imagenes/phone5.gif" ALIGN="middle"> 

<IMG SRC="Imagenes/q_mark2.gif">

Resul
tado
Explica
ción
También es posible alinear imágenes entre sí, e imágenes respecto a otros elementos HTML

     

Ejemplos
Inst.
HTML
<IMG SRC="Imagenes/phone5.gif" ALIGN="left"><B>N&uacute;mero de Tel&eacute;fono.</B> En este apartado se indica el n&uacute;mero de tel&eacute;fono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Número de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este caso aparece la imagen insertada en el texto, de forma que esta se integra en párrafo que la rodea, al contrario que en los casos anteriores
Inst.
HTML
<IMG SRC="Imagenes/phone5.gif" ALIGN="right"><B>N&uacute;mero de Tel&eacute;fono.</B> En este apartado se indica el n&uacute;mero de tel&eacute;fono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Resul
tado
Número de Teléfono. En este apartado se indica el número de teléfono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual.
Explica
ción
En este ejemplo aparece la imagen alineada a la derecha.

 

BORDER  -  Borde de la imagen

 

Ejemplos
Inst.
HTML
<A HREF="Imagenes.htm"><IMG SRC="Imagenes/q_mark3.gif"></A>
Resul
tado
Explica
ción
Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace.
Inst.
HTML
<A HREF="Imagenes.htm"><IMG SRC="Imagenes/q_mark3.gif" BORDER="0"></A>
Resul
tado
Explica
ción
Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen, que sirve de hiperenlace.

 

HEIGHT  y  WIDTH  -  Tamaño de la imagen

 

Ejemplos
Inst.
HTML
<IMG SRC="Imagenes/world.gif" WIDTH="100" HEIGHT="25">
Resul
tado
Explica
ción
Si no se indican bien ambos valores, teniendo en cuenta la proporción de la imagen esta puede aparecer deformada.
Inst.
HTML
<IMG SRC="Imagenes/world.gif" WIDTH="75">
Resul
tado
Explica
ción
En este se ve como al indicar uno solo de los parámetros, el otro se ajusta apropiadamente a la proporción de la imagen.
Inst.
HTML
<IMG SRC="Imagenes/venancio.gif WIDTH="25%ALIGN="middle">
<IMG SRC="
Imagenes/constr.gif"      WIDTH="73%">
Resultado  

Explica
ción
Si varía el tamaño de la ventana de su navegador, comprobará que el tamaño de las imágenes cambia, pero guardan la misma proporción, el obrero ocupa un 25% de la ventana y la barra el 73% restante (se deja un 2% para la separación). Y siempre se mostrarán ambas imágenes en la misma línea.

 

HSPACE  y  VSPACE  -  Espaciado de separación de la imagen

 

Ejemplos
Inst.
HTML
<IMG SRC="Imagenes/pr_star.gif"><IMG SRC="Imagenes/or_star.gif">
<IMG SRC="
Imagenes/pr_star.gif" HSPACE="100"><IMG SRC="Imagenes/or__star.gif">
Resul
tado
Explica
ción
Como se ve en el segundo caso las imágenes aparecen separadas 100 puntos. El espaciado es igual a la derecha que a la izquierda, por tanto también aparece la imagen separada del borde.

 


MAPAS

Mapas definidos en el Servidor

<A HREF="http://www.servidor.es/imagemap/fichero_mapa.map">

      <IMG SRC="imagen" ISMAP>

</A>

Mapas definidos en el Cliente

<IMG SRC="imagen" USEMAP="#nombre_del_mapa" >

DEFINICIÓN

<MAP NAME="nombre_del_mapa">

   <AREA SHAPE="
rect" COORDS="x-izquierda, y-arriba, x-derecha, y-abajo"
HREF="URI">
   <AREA SHAPE="
circle" COORDS="x-centro, y-centro, radio" href="URI">
     ...
   <AREA SHAPE="
poly"   COORDS="x1, y1, x2, y2, ..., xn, yn, x1, y1" href="URI">
   <AREA SHAPE="
rect"   COORDS="0, 0x-derecha, y-abajo" HREF="URI_por_defecto">

</MAP>


Un ejemplo completo:

    Para la definición del MAPA escribimos:
<MAP NAME= "casa">
    <AREA
SHAPE= "poly"   COORDS= "2,62,57,62,28,1" HREF= "Tejado.htm">
    <AREA
SHAPE= "rect"   COORDS= "21,101,35,138"   HREF= "Puerta.htm">
    <AREA
SHAPE= "rect"   COORDS= "2,64,57,138"       HREF= "Fachada.htm">
    <AREA
SHAPE= "circle" COORDS= "80,76,21"            HREF= "Arbol.htm">
    <AREA
SHAPE= "rect"   COORDS= "78,98,85,138"     HREF= "Tronco.htm">
    <AREA
SHAPE= "rect"   COORDS= "0,0,96,138"         HREF= "Fondo.htm">
</MAP>

    Para activar el mapa indicamos la imagen a mostrar, advirtiendo que dicha imagen es tratada por un mapa. Para ello escribimos la siguiente directiva :

<IMG  SRC = "casa.gifUSEMAP = "#casa">

    Si pulsamos en las diferentes zonas del mapa, activaremos los diferentes enlaces:

 


Como podemos observar, el proceso mas laborioso es el de determinar las coordenadas. Existen programas como HTML Map Designer que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el ratón.  Puedes buscar estos programas en Shareware.com buscando por "map  html".

  

 

Anterior Índice Siguiente