Imágenes.
Poner imágenes en nuestra web produce unos resultados asombrosos de una
manera muy fácil. Vamos a mostrarte como puedes incluir una imagen y los
atributos que puedes darle a la misma.
El tag básico para colocar una imagen es
"img". Este tag, a diferencia de la gran mayoría de los
tags de html, no necesita un cierre. Va acompañado de diferentes atributos
que te vamos a explicar a continuación.
El atributo "src" es imprescindible para poder colocar una
imagen. Este atributo es el que indica dónde se encuentra alojada la imagen
que queremos mostrar. Se escribe así: <img src="x">, siendo
"x" la dirección o la url dónde se encuentra situada la foto.
La foto podemos alinearla en la página
como queramos mediante "align", utilizando los atributos "left" para alinearla a la
izquierda, "right" para alinearla a la derecha, "top" para alinearla
arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro.
También podemos poner una descripción de
la imagen dentro de la misma para que la gente puede leerla al mantener el
ratón encima de ella. Esta descripción podemos escribirla mediante el
atributo "alt" y lo escribiríamos de la siguiente manera: alt=
"x", siendo "x" la descripción que le gente leerá al
pasar el ratón por encima.
Debemos aclarar que no con todos los
navegadores podemos ver el "alt" de manera visual. Hay algunos que
no lo representan.
Atributos opcionales pero muy
recomendables, son el height y el width. El height marca la
altura de la imagen, mientras que el width marca la anchura. Son recomendables
porque así ayudaremos al navegador a representar la imagen.
Y por último, también queremos mostrarte
que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes:
"border". Después solo tendrás que definir cuál quieres que
sea el grosor del borde.
Así las cosas, deberemos escribir este código...
...para poder ver esta preciosa
fotografía
 |
MAPA DE IMAGENES
Html nos permite la opción de crear
diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que
diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes
destinos.
Las fotos en las que queramos introducir
un mapa de imágenes deberán ser de uno de estos tres formatos: .jpg, .gif o
.png, que son los tres formatos recomendables para todos los navegadores.
A continuación vamos a explicarte como
podemos crear este tag html y los diferentes atributos que posee este tag. Como
veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es
el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen
programas de edición de imágenes que nos ayudarían en esa tarea.
El tag map
Cómo ya podemos suponer, <map> es el
tag necesario para poder crear un mapa de imágenes en html. Por supuesto, posee
un cierre: </map>.
Este tag debe ir acompañado del atributo
name= “x”, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa
que se llame ejemplo 1, escribiremos: <map name= “ejemplo1”>
Atributo area
El mapa de imágenes lleva un área dentro
de la cual podremos pinchar para dirigirnos al destino que hayamos
preestablecido. Pero, por supuesto, esa área se la tenemos que indicar al
navegador para que la interprete.
La zona del enlace se indica dentro de la
etiqueta, estableciendo las coordenadas de dicha área. También podemos
escribirle un texto alternativo, un “alt”, al área.
Existen tres tipos de áreas. Vamos a
explicártelas a continuación.
Atributo shape
Este atributo nos indicará el tipo de área
que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal
(poly) o circular (circle) y cada una de ellas tiene unas características
diferentes. Vamos a profundizar un poco más en ellas.
- shape=“rect”
: Este tipo de área crea un mapa de imagen rectangular. Para definir la
zona que incluirá ese mapa deberemos definir la esquina superior izquierda
del área y la esquina inferior derecha.
- shape=“circle”
: Este tipo de área crea un mapa de imagen circular. Nosotros sólo debemos
indicarle el centro de la circunferencia y el radio del mismo.
- shape=“poly”
: Este tipo de área es la más versátil de todas, la que más posibilidades
nos ofrece, ya que nos permite crear una zona personalizada. Para crearla
debemos indicarle los diferentes puntos del polígono que hagamos y de una
forma ordenada, siguiendo el camino que nosotros hemos trazado para
hacerlo.
Bien, pero…¿y cómo indicamos las
coordenadas? Gracias al siguiente atributo.
Atributo coords
El atributo coords se escribe de la
siguiente forma: coords= “x,x,x,x”, entendiendo que cada “x” representa un
punto en la imagen. Cada coordenada debe ir separada por comas.
Y el dónde nos dirigirá esa área nos lo
indicará el atributo “href”
Atributo href
Aquí deberemos indicar el destino del
área.
usemap
Hasta ahora te habíamos indicado cómo
podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos
dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace
gracias al atributo usemap.
Este atributo se escribe de la siguiente
forma: usemap=“#x”, siendo x el nombre del mapa de imágenes que queramos
utilizar.
Nosotros hemos querido hacerte un ejemplo
con la imagen que puedes ver más abajo. Dentro de estas bolas de billar,
nosotros hemos hecho un mapa de imágenes con un área circular que coincide con
la bola amarilla. Nuestra “href” es la página de inicio de este tutorial.
También hemos hecho un área poligonal en la bola negra del fondo que te llevará
al inicio del tutorial de css y otro área rectangular en el centro de la
imagen, que te redigirá al inicio del tutorial de php.
El código nos ha quedado de la siguiente
manera:
<img
src="http://html.hazunaweb.com/html/imagenes/prueba-mapa.jpg"
alt="Prueba de mapa de imágenes" width="300"
height="214" border="0"
usemap="#billar">
<map name="billar">
<area alt="Si clícas aquí irás a la página
de inicio del tutorial de
html" shape="circle" coords="148,154,44"
href="http://www.hazunaweb.com">
<area alt="Si clías aquí irás a la página
de inicio del tutorial de
css"
shape="poly"
coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,
36,177,39,168,46,162,52,160,61"
href="http://css.hazunaweb.com/">
<area alt="Si clías aquí irás a la página de inicio del tutorial de
php" shape="rect" coords="11,77,288,105"
href="http://php.hazunaweb.com/">
</map> |
Y el resultado lo verás si clícas en las
zonas adecuadas:
 |
No hay comentarios:
Publicar un comentario