IMGENES

Para preparar las imgenes tendremos que recurrir algn tipo de aplicacin especifica de imgenes como son PhotoShop, GIMP , etc. Independientemente del programa que utilicemos, debemos guardar la imagen con uno de los formatos disponibles por la aplicacin. Deberemos elegir aconse ablemente uno de los siguientes! GI" "ormato especialmente recomendado para dibu os, utili#a una paleta de $%& colores. "ormato recomendado para fotograf)as por su ni*el de comprensin. Sustituto del formato GI", es una opcin *lida para todo tipo de imgenes.

'P(G

P+G

,ap)tulo - . Imgenes

/esumen 01M2

Elemento IMG
Para insertar una imagen usaremos el elemento en l)nea IMG. 4l ser un elemento en l)nea, nos encontramos que podremos incluir una imagen en un encabe#ado, en mitad de un prrafo, dentro de una lista, etc. 2os atributos del elemento IMG son los siguientes, lang, dir, title, st5le, id, class, src, alt, align, border, 6idth, height, hspace, *space, longdesc, name, ismap, usemap. 2os atributos de formato no debemos usarlos si deseamos incluir el formato de la pgina en una ho a de estilo. Siempre dispondremos de una propiedad en ,SS para dar el mismo formato. (l elemento IMG debe tener como m)nimo uno de los siguientes atributos! src Indicaremos el 7/2 donde se encuentra la imagen a insertar. 2a sinta8is a utili#ar !

src9:ruta;imagen: (stableceremos la locali#acin de la imagen que queremos insertar mediante la etiqueta IMG, 5 en donde la ruta puede ser relati*a a la estructura de carpetas del sitio 6eb o absoluta, en cu5o caso se debe dar la 7/2 completa del fichero grfico. ( emplos! <IMG S/,9:imagenes=barco. pg:> <IMG S/,9:http!==666.dominio.es=imagenes=barco. pg:> alt Indicaremos una descripcin de la imagen. (n caso de que se produ#ca un error al cargar la imagen, se *isuali#ar el *alor asignado.

,ap)tulo - . Imgenes

/esumen 01M2

(l elemento IMG al no ser un elemento de bloque, la imagen insertada aparece como parte de la l)nea, me#clado con el resto del te8to. 2a alineacin se produce a la parte inferior de la l)nea, por lo cul, la altura de esa l)nea de edicin, depender de la altura de la imagen. (sto puede producir efectos no deseados para imgenes de gran tama?o.

2a alineacin *ertical de la imagen la podemos controlar con la propiedad ,SS *ertical@align.

(n Aste segundo caso hemos escrito la siguiente definicin de propiedad ,SS! img B *ertical@align! middle C 7na imagen puede ser configurada con un determinado tama?o a partir de las propiedades ,SS 6idth 5 height, podemos asignar medidas proporcionales respecto al te8to por si este se modifica. img B 6idth! %emD height! %emC 4 la hora de modificar el tama?o de una imagen, debemos mantener el equilibrio entre ancho 5 alto para no deformar una imagen.

,ap)tulo - . Imgenes

/esumen 01M2

4l ser el elemento IMG un elemento en l)nea, la posicin hori#ontal de la imagen depender en principio del punto en que se ha5a insertado la marca < IMG> respecto al te8to 5 la distribucin de ese te8to en el rea que le corresponda. (n el momento que usemos el atributo align, a fin de alinear hori#ontalmente la imagen en el margen que nos interese, Asta se con*ierte en un ob eto flotante. (sto significa que el te8to del prrafo fluir a su alrededor, pero ella no se mo*er del punto en que la ha5amos alineado.

(n su lugar usaremos las propiedades ,SS !

float ,SS 4cepta tres *alores posibles, left, right 5 none, segn el cual el elemento asociado quedar como ob eto flotante alineado a la i#quierda, a la derecha o no ser flotante, respecti*amente. 2a principal caracter)stica de un ob eto flotante, 5a sea una imagen o de cualquier otro tipo, es precisamente el hecho de que el contenido que tenga alrededor fluir de ando el ob eto al margen que le corresponda. 2a propiedad float puede usarse para cualquier otro ob eto, incluido bloques creados con DIF.

clear ,SS (l siguiente bloque, contina a partir del ob eto flotante indicado. 2a distribucin del te8to alrededor de un ob eto flotante puede controlarse mediante la propiedad clear ,SS. 2a propiedad clear puede tomar los *alores left, right o both segn deseemos que el siguiente bloque de te8to quede deba o del ob eto flotante que ha5 a su i#quierda, a su derecha o ambos, respecti*amente.

,ap)tulo - . Imgenes

/esumen 01M2

Cdigo fuente ejemplo imgenes flotantes

,ap)tulo - . Imgenes

/esumen 01M2

Resultado (ventana estrecha) ejemplo imgenes flotantes

Resultado (ventana ancha) ejemplo imgenes flotantes

,ap)tulo - . Imgenes

/esumen 01M2

&

Para mrgenes 5 bordes disponemos de *arios atributos. (l atributo border nos permite indicar el grosor del borde a dibu ar alrededor del recuadro ocupado por la imagen. ,on el atributo hspace indicaremos la separacin hori#ontal 5 con *space la *ertical, de la imagen respecto a los dems elementos continuos en la pgina. 2os tres atributos se e8presan las cantidades en p)8eles. (n su lugar usaremos las propiedades ,SS border, margin, padding. 7na imagen puede ser un hiper*)nculo, para crear Asta situacin, basta con introducir el elemento IMG como contenido del elemento 4.

,ap)tulo - . Imgenes

/esumen 01M2

Mapas de imagen
2as imgenes pueden actuar, aparte de como hiper*)nculos, como mapas en los que determinadas reas estn asociadas a 7/2 diferentes. (8isten dos tipos distintos de mapas de imagen! basados en el ser*idor 5 basados en el cliente. 7n mapa de imagen basado en el ser*idor se constru5e mediante el atributo ismap del elemento IMG, caracteri#ndose porque al despla#ar el puntero del ratn sobre la imagen 5 hacer clic el agente de usuario toma las coordenadas, e8presadas en p)8eles desde la esquina superior i#quierda de la imagen, 5 las en*)a como parmetros al 7/2 que indique el atributo href del elemento 4. (n el ser*idor e8istir un programa que tome esas coordenadas 5 las use para elaborar una respuesta. 2a sinta8is ser la siguiente! <4 href9:7/2:> <IMG src9:Imagen : ismap> <=4>

2os mapas de imagen basados en el cliente se componen de un elemento IMG que, mediante el atributo usemap, apunta a una lista de formas, coordenadas e hiper*)nculos, lo que es el mapa en s), generado mediante los elementos M4P 5 4/(4. (s el propio agente de usuario el que, guindose por dicho mapa, decide quA 7/2 debe usar segn el punto donde se ha5a hecho clic. (l primer paso en la construccin de un mapa de imagen basado en el cliente es la definicin del mapa de coordenadas, compuesto de un elemento M4P , que representa al mapa, con uno o ms elementos 4/(4 en su interior. ,ada uno de esos elementos establece la forma geomAtrica, coordenadas, 7/2 5 otros atributos asociados a cada rea de la imagen que *a5a a actuar como hiper*)nculo. 2as etiquetas de apertura 5 cierre del elemento M4P , <M4P> 5 <=M4P>, son obligatorias, pudiendo alo ar entre ellas cualquier elemento de bloque 5 uno o ms elementos 4/(4. 2os atributos que podemos usar con el elemento M4P son lang, dir, class, id, title, st5le, name.

,ap)tulo - . Imgenes

/esumen 01M2

Por cada regin, #ona o rea de la imagen que nos interese diferenciar, a?adiremos un elemento 4/(4 como contenido de M4P . (l elemento 4/(4 es un elemento *ac)o, ra#n por la cual la etiqueta de cierre es opcional. 2os atributos que podemos usar con el elemento 4/(4 son lang, dir, class, id, title, st5le, alt, name, coords, ref, nohref, shape, accessJe5, tabinde8. Sus atributos shape, coords 5 ref son importantes al definir el rea, con el primero indicaremos la forma geomAtrica que tiene el rea a definir, con el segundo determinamos las coordenadas 5 con el tercero asignamos el 7/2 al que habr)a que acceder si se acti*a dicha #ona. (l atributo shape puede tomar tres *alores distintos! rect, circle 5 pol5, segn el rea a definir sea un rectngulo, c)rculo o pol)gono. /ect

Si el rea es rectangular, o cuadrada, el atributo coords necesita las coordenadas de la esquina superior i#quierda 5 la esquina opuesta, e8presadas como K3,L3 K$,L$ M,ol,"il@Sup@I#q ,ol,"il@Inf@DerN. Se separa con una coma la referencia hori#ontal de la *ertical de cada esquina, mientras que para separar unas coordenadas de otras utili#amos un espacio. ,ircle

Si el rea es circular tendremos que asignar a coords las coordenadas del centro 5 una medida adicional indicando el radio, en el formato K,L /. Pol5

Para establecer el rea de un pol)gono necesitaremos tomar las coordenadas de cada uno de sus *Artices, facilitndolos en el atributo coords en formato de lista! KI,Ll K$ ,L$ ... Kn,Ln. 2a disponibilidad de los atributos href 5 alt hace innecesario el uso del elemento 4 para definir los hiper*)nculos correspondientes a cada rea del mapa de imagen, en realidad cada elemento 4/(4 es el sustituto de un elemento 4. (n caso de que una determinada rea no deba estar acti*a, en lugar de href emplear)amos el atributo nohref. ,ap)tulo - . Imgenes /esumen 01M2 -

(l elemento 4/(4 tambiAn cuenta con los atributos accessJe5 5 tabinde8, por lo que podemos asociar ata os de teclado 5 determinar el orden de acceso mediante el tabulador. 2os hiper*)nculos representados por un mapa de imagen, por tanto, son accesibles tambiAn mediante el teclado. Para asociar el mapa con la imagen utili#aremos el atributo usemap, al que asignaremos el nombre del mapa, establecido con el atributo name del elemento M4P , precedido del carcter O, como si se tratase de un marcador de posicin. De manera opcional, tambiAn podemos usar el atributo longdesc para facilitar el 7/2 de una pgina en la que se describa el mapa de imagen.

Cdigo fuente ejemplo mapa de imgenes

,ap)tulo - . Imgenes

/esumen 01M2

3P

Resultado ejemplo mapa de imgenes

,ap)tulo - . Imgenes

/esumen 01M2

33

Imagen de fondo
Puede usarse como fondo una imagen, teniendo adems *arias opciones de configuracin para determinar la posicin, repeticin, etc. 4 la hora de elegir una imagen que *a a aparecer como fondo del documento es especialmente importante, que no dificulte la lectura del contenido de la pgina. La que el atributo bacJground del elemento QRDL ha sido declarado como obsoleto, siendo desaconse able su uso, utili#aremos propiedades ,SS de forma e8clusi*a. (stas son las siguientes propiedades! bacJground@color (stablece el color de fondo. Puede tomar cualquier nombre o cdigo de color o bien el *alor transparent para conseguir que el fondo sea transparente. bacJground@image Puede tomar como *alor none o un 7/2 para recuperar una imagen que aparecer como fondo. 2a sinta8is a utili#ar ser la siguiente! QacJground@image! url M S =imagen="ondo@3. pgTN bacJground@position Sir*e para establecer la posicin de la imagen de fondo. Puede tomar dos *alores, uno haciendo referencia a la posicin hori#ontal 5 otro a la *ertical. 2os *alores son los siguientes! top bottom 2a imagen quedar en la parte superior del rea. 2a imagen quedar en la parte inferior del rea.

,ap)tulo - . Imgenes

/esumen 01M2

3$

left right center medida

2a imagen quedar en la parte i#quierda del rea. 2a imagen quedar en la parte derecha del rea. 2a imagen quedar centrada. 2a imagen se despla#ar hacia la derecha 5=o hacia aba o, dependiendo de la medida indicada. 2a sinta8is a utili#ar ser la siguiente! QacJground@position! $Pp8 %p8 $Pp8 hacia la derecha, %p8 hacia aba o.

bacJground@ repeat Inicialmente la imagen usada como fondo suele repetirse tantas *eces como sea necesario hasta rellenar el rea de *isuali#acin completa. ,on esta propiedad podemos controlar esa repeticin, asignndole uno de los siguientes *alores! repeat repeat@8 repeat@5 no@repeat 2a imagen se repite en sentido horizontal y vertical. 2a imagen se repite nicamente en sentido hori#ontal. 2a imagen se repite e8clusi*amente en sentido *ertical. 2a imagen no se repetir.

,ap)tulo - . Imgenes

/esumen 01M2

3E

Si *amos a establecer un color de fondo, una imagen 5 las propiedades de posicin, repeticin, etc., en lugar de usar propiedades indi*iduales podemos facilitar todos los *alores a la propiedad bacJground.

(stas propiedades pueden aplicarse no solamente al fondo del documento, sino a los elemento de bloque. (sto significa que podemos usar una imagen de fondo en una seccin DIF, con independencia de que la pgina tenga otra distinta.

Cdigo fuente ejemplo imagen de fondo

,ap)tulo - . Imgenes

/esumen 01M2

3G

Resultado

ejemplo imagen de fondo

,ap)tulo - . Imgenes

/esumen 01M2

3%

Imgenes como marcadores de lista

Rtra aplicacin prctica de los archi*os con imgenes, es su uso como marcadores o bolos de los elementos de una lista no ordenada. 4signar un bolo a medida a una lista es tan sencillo como aplicarle la propiedad list@ st5le@image, a la que asignar)amos un *alor equi*alente al de bacJground@ image. Por e emplo, creamos un selector de clase con la propiedad list@st5le@ image 5 posteriormente, asignamos dicha clase a nuestro elemento 72. ul.bolo B list@st5le@image! urlM:imagenes=bolo@3.gif:NC <72 class9:bolo:>

Cdigo fuente ejemplo imagen de vieta

,ap)tulo - . Imgenes

/esumen 01M2

3&

Resultado ejemplo imagen de vieta

,ap)tulo - . Imgenes

/esumen 01M2

3H