6. IMÁGENES
6.1.Insertar imágenes
Hasta ahora hemos escrito texto en nuestra Web. Vamos a ver ahora como insertar imágenes. Para incluir una imagen en nuestra página Web utilizaremos la instrucción <IMG>. Recuerda que actualmente los navegadoes solo reconocen dos formatos: GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PC , CDR ,etc.) no será mostrado por el visor, a no ser que disponga de un programa externo que permita su visualización. La instrucción <IMG> tiene varios parámetros:
src = "imagen".
Indica el nombre del fichero gráfico a mostrar.
alt = "texto".
Mostrará el texto indicado en el caso de que el navegador
utilizado para ver la página no sea capaz de visualizar la
imagen.
lowscr = "imagen".
Muestra una segunda imagen "superpuesta" sobre la
primera una vez se carga la página. Este parámetro no es
reconocido por la totalidad de los navegadores, así que en la
mayoría de los casos será ignorado mostrándose sólo la
primera imagen. Netscape muestra la imagen indicada por lowscr
en primer lugar, y posteriormente la indicada por src.
Si las imágenes son iguales pero tienen distinta resolución se
conseguirá un efecto tipo "Fade". Si las imágenes son
de distinto tamaño la imagen indicada en src se
redimensionará al tamaño indicado por la imagen referenciada en
lowscr.
align ="valor".
Indica cómo se alineará el texto que siga a la imagen. Los
valores son:(top) alinea el texto con la parte superior de la
imagen, (middle) con la parte central y (bottom) con la parte
inferior.
border ="número".
Indica el tamaño del borde de la imagen. A toda imagen se le
asigna un borde que será visible cuando la imagen forma parte de
un hiperenlace.
height = "número o %".
Indica el alto de la imagen en puntos o porcentaje. Se usa para
variar el tamaño de la imagen original.
width ="número o %".
Indica el ancho de la imagen en puntos o porcentaje. Se usa para
variar el tamaño de la imagen original.
hspace ="número".
Indica el número de espacios horizontales, en puntos, que
separarán la imagen del texto que la siga y la anteceda.
vspace ="número".
Indica el número de puntos verticales que separarán la imagen
del texto que la siga y la anteceda.
ismap/usemap. Indica que la imagen es un MAPA.
Veremos estos parámetros en el siguiente apartado.
SI PONEMOS |
SE VERA ASÍ |
| Te gusta<IMG src ="imagen.gif"
alt="Lastima, no puedes verla" height="120" width="120" align="middle" hspace="20">Mi imagen |
Te gusta Mi imagen |
| Si el visor no pudiese visualizar el gráfico....... | Te gusta Lastima, no puedes verla Mi imagen |
La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la página Web. Si no fuese así, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.Ejemplo:
<IMG src="http://www.unsitio.com/imagen.gif">
Para probar lo aprendido insertaremos la imagen en la página portada.htm. Ahi donde en el ejemplo se consigne imagen.jpg deberás escribir el nombre de archivo de tu imagen con su extensión gif o jpg:
| <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD> <!-- A continuación se pone fondo amarillo y texto en negro--> <BODY bgcolor ="#FFFF00" text"#000000"> <p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p> <p align="left"><font size="3">Estamos empezando a escribir en esta página web para ver que es lo que sucede, de paso probamos los parámetros que hemos aprendido.</font></p> <p align="left"><font size="3"><em>Ahora probamos a escribir en cursiva</em></font><br> <font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de paso hemos hecho un salto de linea</font></p> <p align="center">Te gusta<IMG src ="imagen.jpg" alt="Lastima, no puedes verla" height="120" width="120" align="middle" hspace="20">Mi imagen</p> </BODY> </HTML> |
6.2.Mapas
Un Mapa es una imagen que permite realizar diferentes hiperenlaces en función de la "zona" de la imagen que se pulse. Las instrucciones para crear mapas son <MAP></MAP> y <AREA>.La instrucción <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa. La instrucción <AREA> define las áreas sensibles de la imagen. Tiene los siguientes parámetros obligatorios :
shape = "tipo".
Indica el tipo de área a definir. Los tipos de área pueden ser
los siguientes : (rect) Area rectangular. Se deben especificar
las coordenadas de la esquina superior izquierda y las de la
esquina inferior derecha. (poly) Polígono. Se deben especificar
las coordenadas de todos los vértices del polígono. El visor se
encarga de "cerrar" la figura. (circle) Circulo. Se
debe especificar en primer lugar las coordenadas del centro del
círculo y a continuación el valor del radio (en puntos).
coords = "coordenadas".
Indica las coordenadas de la figura indicada con shape.
href = "url". Indica
la dirección a la que se accede si se pulsa en la zona
delimitada por el área indicada.
Si dos áreas se superponen, se ejecutará la que se encuentre en primer lugar en la definición del mapa. Es importante definir una última área que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un área definida.
Aunque el tema de los mapas sobrepasa las pretensiones de este curso, vamos a ver un ejemplo ficticio:.
| <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= "casa.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= "dibujo.htm"> </MAP> |
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiríamos la siguiente instrucción :
<IMG src = "grafico.gif" usemap = "#casa">
El proceso mas laborioso es el de determinar las coordenadas. Existen programas que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el ratón.