IMAGENES HTML

Estructura general para las imágenes :

<IMG SRC="URL">

Donde URL es la dirección de la imagen,esta etiqueta no necesita cierre.

Atributos de IMG

Los atributos de la imagen pueden ser los siguientes:

ALT="Texto que aparece al situar el cursor sobre la imagen".

También muestra este mismo texto en caso de que el navegador no cargue la imagen.

ALIGN

Nos indica la posición de la imagen respecto del texto.

ALIGN="LEFT" alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba

ALIGN="RIGHT"alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba.

ALIGN="TOP" si queremos que el texto esté alineado con la parte superior de la imagen

ALIGN="MIDDLE" alinea el texto con la parte central de la imagen

ALIGN="BOTTOM" alinea el texto con la parte inferior de la imagen

CAMBIAR LA ALTURA Y EL ANCHO DE LA IMAGEN

WIDTH=80 "Cambia el ancho"

HEIGHT=100 "Cambia la altura"

Indican la anchura y altura de la imagen en píxeles, en este caso 80x100 píxeles.

COLOCAR BORDE A LA IMAGEN

BORDER=2

Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxeles.

DISTANCIA ENTRE TEXTO E IMAGEN

HSPACE="Espacio Horizontal" y VSPACE="Espacio Vertical

HSPACE=10 , VSPACE=15

Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 píxeles horizontales y 15 verticales.

HIPERVÍNCULO CON IMAGEN

IMAGEN DE FONDO EN HTML

MAPA SENSITIVO

Los mapas sensitivos incorpora una serie de enlaces dentro de una misma imagen mediante la etiqueta <MAP>, cuya estructura es la siguiente:

<map name="nombreMapa">

<area shape="forma" coords="coordenadas" href="enlace" >

...

</map>

<img src="imagen.jpg" usemap="#mapa" />

ATRIBUTO SHAPE

Indica el tipo de Área que puede ser de los siguientes tipos:

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:

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:

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.

shape="DEFAULT"

Representa el resto de zonas del mapa que no hayan sido referenciadas por ninguna forma. En este caso no hay coordenadas.

EJEMPLO

<HTML>

<HEAD><TITLE>mapas</TITLE></HEAD>

<BODY>

</map>

</BODY>

</HTML>

EJERCICIO 1

EJERCICIO 2

EJERCICIO 3

Realizar el siguiente ejercicio, teniendo en cuenta, que cuando se haga clic sobre cualquier imagen de alguna fruta, haga un hipervínculo a algún vídeo de youtube relacionado a la fruta.

Google Sites

Report abuse