<IMG SRC=url>
Este tag se usa para insertar una imagen jpg o gif en un documento o pagina sus principales atributos son:
SRC=url ←- direccion donde esta almacenada la imagen, puede ser relativa ”../folder/CONEJO.JPG” o puede ser absoluta “http://programacionfacil.com/conejo.jpg”
ALT=“mensaje” ←– Propiedad muy util y siempre debe utilizarse, es decir si algun browser no puede desplegar la imagen, en su lugar el browser desplegara el mensaje contenido en este atributo.
ALIGN=[left,right,top,middle,bottom] ←- Acomoda la imagen con respecto al texto que la rodea.
HEIGHT=n pixels ←- altura en pixels de la imagen
WIDTH=n pixels ←- ancho en pixels de la imagen
Ejemplo
<IMG SRC=“conejo.jpg” ALT=“Bienvenidos a Conejilandia” Height=110 Width=100>
Despliegue:
* Observar que aqui el conejito no se duplico, solo se multiplican cuando estan encerrados en un <BODY> tag.
MAPEO DE IMAGENES
<MAP>..</MAP>
Se usan para construir IMAGENES que contienen “HOT SPOTS” donde el click del raton activa una direccion web absoluta por ejemplo “http://misitio.com” o relativa ejemplo “pagina20.html”.
Este tag en forma completa debe incluir tres partes:
A.- El tag <MAP con atributo NAME=nombredelmapa>
B.- Tags <AREA> que creara las zonas o figuras geometricas dentro de la imagen
* sus atributos son:
1.- SHAPE=[circle,poly,default]
1.1.- DEFAULT ←- toda la imagen
1.2.-CIRCLE ←- un circulo con COORDS=“x,y,radio” ejemplo COORDS=“0,0,100”, un circulo con centro 0,0 y radio de 100 pixels.
1.3.- RECT ←- un rectangulo despues usar atributo COORDS=“xizquierda,yarriba,xderecha,yabajo” ejemplo coords=“0,0,10,10” crea un rectangulo de 10 x 10 pixels empezando en la esquina izquierda de la imagen.
1.4.- POLY ←- construye una figura geometrica cualquiera agregar COORDS=“puntoxy,puntoxy,puntoxy..” ejemplo Coords=“10,20,30,40,50,60” contruye un triangulo (hay tres pares de puntos) con coordenadas (10,20) (30,40) (50,60) es claro que si quieren un decagono deberan poner 20 puntos o 10 pares xy dentro de coords.
* Una imagen cualesquiera puede tener varias <AREA>'s solo revisar que las figuras geometricas no se traslapen entre ellas.
2.- HREF=url ←- aqui se pone la direccion web que se quiere activar al hacer click el raton dentro del area definida por la figura geometrica construida, el url puede ser del tipo “http://sitio.com” o puede ser relativo “pagina5.htm”
3.- ALT=“mensaje” ←- mensaje que se despliega si el browser no puede desplegar la imagen
4.- Ya creadas las AREAS apropiadas cerrar el tag </MAP> y despues usar;
C.- <IMG SRC=“imagen.jpg o gif” WIDTH=npixels HEIGTH=npixels USEMAP=”#nombremapa”
Ejemplo
<map name=miconejo>
<area shape=“circle” coords=“0,0,50” href=“http://programacionfacil.com”>
<area shape=“rect” coords=“50,50,100,100” href=“http://mitecnologico.com”>
</map>
<img src=“conejo.jpg” Height=110 Width=100 usemap=”#miconejo”>
Desplegar:
Desplegar click en el circulo:
Desplegar click en el rectangulo:
Es importante observar que se pueden construir sitios completos usando puras interfases graficas visuales, por ejemplo un camion muestra asientos vacios, al realizar un clik en el asiento lleno podemos ver la informacion del pasajero o al clik en asiento vacio se puede llamar al formulario de inserccion de registro en una base de datos.
Aqui el reto seria cuanto de un sitio web a construir se podra manejar con puros mapas de imagenes, recordar que para un usuario normal es mas entendible una imagen que cien palabras.
Este tag se usa para insertar una imagen jpg o gif en un documento o pagina sus principales atributos son:
SRC=url ←- direccion donde esta almacenada la imagen, puede ser relativa ”../folder/CONEJO.JPG” o puede ser absoluta “http://programacionfacil.com/conejo.jpg”
ALT=“mensaje” ←– Propiedad muy util y siempre debe utilizarse, es decir si algun browser no puede desplegar la imagen, en su lugar el browser desplegara el mensaje contenido en este atributo.
ALIGN=[left,right,top,middle,bottom] ←- Acomoda la imagen con respecto al texto que la rodea.
HEIGHT=n pixels ←- altura en pixels de la imagen
WIDTH=n pixels ←- ancho en pixels de la imagen
Ejemplo
<IMG SRC=“conejo.jpg” ALT=“Bienvenidos a Conejilandia” Height=110 Width=100>
Despliegue:
* Observar que aqui el conejito no se duplico, solo se multiplican cuando estan encerrados en un <BODY> tag.
MAPEO DE IMAGENES
<MAP>..</MAP>
Se usan para construir IMAGENES que contienen “HOT SPOTS” donde el click del raton activa una direccion web absoluta por ejemplo “http://misitio.com” o relativa ejemplo “pagina20.html”.
Este tag en forma completa debe incluir tres partes:
A.- El tag <MAP con atributo NAME=nombredelmapa>
B.- Tags <AREA> que creara las zonas o figuras geometricas dentro de la imagen
* sus atributos son:
1.- SHAPE=[circle,poly,default]
1.1.- DEFAULT ←- toda la imagen
1.2.-CIRCLE ←- un circulo con COORDS=“x,y,radio” ejemplo COORDS=“0,0,100”, un circulo con centro 0,0 y radio de 100 pixels.
1.3.- RECT ←- un rectangulo despues usar atributo COORDS=“xizquierda,yarriba,xderecha,yabajo” ejemplo coords=“0,0,10,10” crea un rectangulo de 10 x 10 pixels empezando en la esquina izquierda de la imagen.
1.4.- POLY ←- construye una figura geometrica cualquiera agregar COORDS=“puntoxy,puntoxy,puntoxy..” ejemplo Coords=“10,20,30,40,50,60” contruye un triangulo (hay tres pares de puntos) con coordenadas (10,20) (30,40) (50,60) es claro que si quieren un decagono deberan poner 20 puntos o 10 pares xy dentro de coords.
* Una imagen cualesquiera puede tener varias <AREA>'s solo revisar que las figuras geometricas no se traslapen entre ellas.
2.- HREF=url ←- aqui se pone la direccion web que se quiere activar al hacer click el raton dentro del area definida por la figura geometrica construida, el url puede ser del tipo “http://sitio.com” o puede ser relativo “pagina5.htm”
3.- ALT=“mensaje” ←- mensaje que se despliega si el browser no puede desplegar la imagen
4.- Ya creadas las AREAS apropiadas cerrar el tag </MAP> y despues usar;
C.- <IMG SRC=“imagen.jpg o gif” WIDTH=npixels HEIGTH=npixels USEMAP=”#nombremapa”
Ejemplo
<map name=miconejo>
<area shape=“circle” coords=“0,0,50” href=“http://programacionfacil.com”>
<area shape=“rect” coords=“50,50,100,100” href=“http://mitecnologico.com”>
</map>
<img src=“conejo.jpg” Height=110 Width=100 usemap=”#miconejo”>
Desplegar:
Desplegar click en el circulo:
Desplegar click en el rectangulo:
Es importante observar que se pueden construir sitios completos usando puras interfases graficas visuales, por ejemplo un camion muestra asientos vacios, al realizar un clik en el asiento lleno podemos ver la informacion del pasajero o al clik en asiento vacio se puede llamar al formulario de inserccion de registro en una base de datos.
Aqui el reto seria cuanto de un sitio web a construir se podra manejar con puros mapas de imagenes, recordar que para un usuario normal es mas entendible una imagen que cien palabras.
Comentarios
Publicar un comentario