|
|
|
|
|
|
|
|
Configuración: Windows XP Internet Explorer 6.0
|
HTML Image
¿Cómo mostrar imágenes en una página Web? Tener algunas imágenes en un sitio Web lo hace más atractivo e intuitivo. Sin embargo, es importante no excederse ya que las imágenes pueden llevar mucho tiempo en cargarse y, en algunos casos, pueden hacer que un documento sea más difícil de leer. La etiqueta IMG se usa para insertar imágenes en páginas HTML. La imagen puede ubicarse en el mismo servidor que la página en la que se inserta, pero también puede ubicarse en un servidor diferente si se especifica la dirección URL completa. Solamente se admiten los siguientes formatos de imagen en los estándares W3C: imágenes JPEG (.JPG): Imágenes con un gran número de colores que han sido comprimidas en un alto grado para reducir su tamaño, de modo que requieren menos tiempo para la descarga, imágenes PNG: Tienen un tamaño más pequeño cuando la imagen tiene un número reducido de colores sólidos. Este formato permite también imágenes entrelazadas (que aparecen progresivamente) con colores de 24 bits e imágenes en las que uno de los colores se ha definido como transparente. imagen GIF: Tienen las mismas ventajas que las imágenes PNG, aunque el formato GIF se limita a 256 colores y sea un formato no completamente abierto. ¿Cómo mostrar imágenes en una página Web? Cómo insertar una imagen en una página Web? Los principales atributos de la etiqueta IMG son: SRC: Muestra la ruta donde se ubica la imagen (obligatorio). ALIGN: Especifica cómo está alineada la imagen en relación al texto adyacente. Los valores posibles son TOP, MIDDLE y BOTTOM (encima, en el medio, debajo). ALT: Permite insertar un texto alternativo cuando la imagen no aparece. Muestra un texto alternativo si no aparece la imagen. TITLE: Muestra información cuando el cursor se desplaza sobre la imagen. WIDTH: Especifica el ancho de la imagen. HEIGHT: Especifica la altura de la imagen. Así, para insertar una imagen, esta es la clase de etiqueta que debe utilizarse: <IMG SRC="url_de_imagen" ALT="Texto alternativo" TITLE="Texto a mostrar"> Atributo Valor Resultado Efecto visual ALIGN Bottom center left middle top right Alineación de imagen. ALT Muestra un texto alternativo si no aparece la imagen. BORDER Número entero Número de píxeles en el borde de la imagen. El color del borde puede definirse por el atributo LINK o TEXT de la etiqueta <BODY>. De forma predeterminada, el atributo BORDER se establece en 1 para crear un pequeño marco alrededor de la imagen. Si no lo quiere, puede establecer el valor en 0. HEIGHT Número entero Altura de la imagen (en píxeles o en %). Cuando este atributo especifica un tamaño diferente a la altura original del gráfico, el navegador automáticamente lo restaura al tamaño original, lo que puede disminuir la calidad de la imagen mostrada. HSPACE Número entero Número de píxeles de ajuste entre la imagen y el texto adyacente (horizontalmente). Texto LONGDESC URL de la descripción de la imagen. LOWSRC Direcciones URL Una imagen alternativa (generalmente más pequeña) que se muestra mientras la imagen real se carga en el navegador. NAME Establece el nombre de la imagen. Este atributo se usa principalmente para imágenes en JavaScript. SRC Direcciones URL La dirección URL de la imagen. TITLE Muestra un texto alternativo si no aparece la imagen. USEMAP URL o nombre del anclaje que define la imagen mapeada. VSPACE Número de píxeles de ajuste entre la imagen y el texto adyacente (verticalmente). Prueba de texto WIDTH Número entero Ancho de la imagen (en píxeles o en %). Cuando este atributo especifica un tamaño diferente al ancho original del gráfico, el navegador automáticamente lo restaura al tamaño original, lo que puede disminuir la calidad de la imagen mostrada. Rodear una imagen con texto Las imágenes se insertan en un texto como caracteres. Esto hace que parezca imposible colocar texto alrededor de una imagen. Sin embargo, existen varios métodos para hacer esto, veremos dos de ellos: El primero implica la creación de una tabla con una fila y dos columnas, en las que se ubican la imagen y el texto. El segundo (que es menos preciso) implica la alineación de la imagen hacia la derecha o hacia la izquierda con el atributo ALIGN y luego la escritura del texto. Si desea evitar que el texto rodee las imágenes, use el atributo CLEAR. Mapas de imágenes Puede crear diferentes áreas de selección dentro de una misma imagen usando el atributo USEMAP conjuntamente con la etiqueta MAP El atributo USEMAP de la etiqueta <IMG> apunta a una etiqueta <MAP> que contiene una descripción de las áreas seleccionables en las que se divide el mapa. La etiqueta <MAP> tiene un atributo NAME para definir su nombre, y también declara qué áreas son accesibles usando las etiquetas AREA. Etiqueta Atributo Valor Efecto visual MAP NAME AREA SHAPE RECT CIRCLE POLY Rectángulo (sus coordenadas son: "abscisa superior izquierda, ordenada superior izquierda, abscisa inferior derecha, ordenada inferior derecha") Círculo (sus coordenadas son: "abscisa de centro, ordenada de centro, radio") Polígono (sus coordenadas son: "lista de coordinadas, separadas por comas ") HREF Direcciones URL Vínculo a URL COORDS "XX,XX,XX,XX" Contiene las coordenadas del área accesible, separadas por comas. A continuación hay un ejemplo de un mapa de imagen: <IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map"><MAP NAME="Map"> <AREA SHAPE="rect" HREF="start.html" COORDS="0,0,48,28"> <AREA SHAPE="circle" HREF="previous.html" COORDS="50,30,10"> <AREA SHAPE="poly" HREF="next.html" COORDS="60,50,80,30,100,40,50,100"></MAP> |
Esta buena la informacion.
Gracias |
Me sirvio de muchooooooooooooo!!
muchos thankiuuuus!!
|
Resultados de
Resultados de
Resultados de
Resultados de
Resultados de