Cuando usas IMG estás usando una etiqueta HTML. La parte SRC se llama atributo. Hay muchos otros atributos que puedes agregar a la etiqueta IMG. Aquí están los atributos de la imagen en HTML 5:

ALT
SRC
ALTURA
WIDTH
USEMAP
ISMAP

En las versiones anteriores de HTML, también tenías esto:

ALIGN
FRONTERA
HSPACE
VSPACE

Sin embargo, estos ya han sido desaprobados (ya no son válidos). Todavía puedes usar ...pero... Pero la forma de HTML 5 es aplicarlos con CSS. Verás como para hacer eso en breve.

El Atributo ALT

El primer atributo es ALT. Lo usas así:

<img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg" ALT="York Minster "*;

ALT significa "texto alternativo". Si la imagen no aparece, entonces los usuarios verán el texto entre las dobles comillas de ALT. Pruébalo. Cambiar tu código HTML a esto:

<img src="https://www.homeandlearn.co.uk/WD/york_images/york_min.jpg" ALT="York Minster "*;

Aquí, hemos cambiado el nombre de la imagen. Ahora guarda tu trabajo y actualiza tu en el navegador. Debería ver esto (Internet Explorer):

Atributos de la imagen

Internet Explorer ha añadido el texto ALT después de la X roja.

Siempre debes añadir algo de texto ALT a tus etiquetas IMG ya que es útil para cegar y usuarios con visión parcial: el texto de la ALT se leerá en voz alta. El texto ALT también es útil para los motores de búsqueda, especialmente la búsqueda de imágenes de Google.

Atributos de altura y anchura

Otra cosa que puedes hacer con la etiqueta de la imagen es especificar una nueva altura y anchura. Esta es bastante fácil. Cambia la etiqueta de la imagen por esta (hemos dejado la etiqueta ALT de la que no se puede prescindir):

<img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg" ALTURA="512" ANCHURA="384";

La imagen original tenía 2048 píxeles de alto por 1536 píxeles de ancho. Al cambiar el Altura y anchura, podemos disminuir el tamaño de la imagen. La imagen en sí misma todavía tardan la misma cantidad de tiempo en cargarse en un navegador porque no hemos cambió el tamaño del archivo JPEG. Todo lo que hemos hecho es cambiar la altura y atributos de ancho de la etiqueta IMG.

Esto, sin embargo, no sería práctico en Internet, porque el tamaño de el archivo JPEG no cambiaría. Todo lo que harás es usar más tiempo de descarga para obtener una imagen más pequeña. Así que cuando se cambia el tamaño de la imagen con los atributos de Alto y Ancho, subir de tamaño y no bajar, como hemos hecho aquí. Si sus imágenes son demasiado grandes, usar un software de edición de imágenes para reducir la altura y el ancho.

El atributo USEMAP

El atributo USEMAP se usa para convertir áreas específicas de una imagen en accesibles... enlaces. Tome la imagen de abajo, por ejemplo. No queremos que la totalidad de la imagen para ser un hipervínculo, sólo las formas de color.

Atributos de la imagen

Si mantienes el ratón sobre las zonas grises no pasa nada, el puntero del ratón... no cambiará. Sin embargo, al mantener el ratón sobre una forma, el puntero del ratón cambia para indicar que es un vínculo. Todo esto se hace con el atributo USEMAP. El El código HTML con un atributo USEMAP se ve así:

img src="https://www.homeandlearn.co.uk/WD/images/shapes.gif" USEMAP="#shapes_1">

Después del atributo USEMAP viene un signo igual, luego el nombre de su mapa, precedido por un símbolo de hachís/libra. El nombre del mapa puede ser cualquier cosa que quieras.

Una vez que tienes un nombre de mapa, necesitas un mapa que vaya con él. Echa un vistazo a esto que es el mapa de nuestra imagen de formas de arriba:

<MAP NAME="shapes_1">

AREA SHAPE="Rect" coords="37, 25, 137, 72";
AREA SHAPE="Círculo" coords="205 49, 29";
AREA SHAPE="Poly" coords="317, 23, 349, 76, 284, 76"

Así que tienes dos etiquetas MAP, una de inicio y otra de fin. La primera etiqueta MAP toma una Atributo del nombre. Este es el nombre USEMAP de su código IMG. Entre los dos Las etiquetas de MAP necesitan al menos una etiqueta de AREA. La etiqueta AREA toma los atributos de su propio: SHAPE, COORDS, y HREF. Las formas que puedes tener son RECT (abreviatura de rectángulo), CÍRCULO, y POLÍGONO (abreviatura de polígono). Cada forma necesita unas coordenadas (el Atributo de COORDS). Para cualquier área rectangular de tu imagen necesitas las coordenadas de la esquina superior izquierda en píxeles. El nuestro era de 37 y 25. Esto significa que 37 píxeles de el borde izquierdo de la propia imagen (la dirección X), y 25 píxeles por debajo de la parte superior de su imagen (la dirección Y). La parte inferior derecha de nuestro rectángulo era 137 píxeles en la dirección X y 72 en la dirección Y.

Para un círculo, necesitas los valores X e Y para el centro del círculo. Tú medir desde la izquierda de toda la imagen, no desde el borde izquierdo del círculo. Para la dirección Y, que se mide desde la parte superior de su imagen. La tercera coordenada que necesitas para un círculo es el radio (la mitad del diámetro).

Para un polígono, se necesitan las coordenadas X e Y de cada punto. Nuestro polígono es un triángulo, por lo que tiene un valor X e Y para cada uno de los tres puntos.

El atributo HREF es la página web a la que se lleva a un visitante cuando un área del se hace clic en el mapa. Hemos escrito un símbolo #. Esto significa "no vayas a ninguna parte - ...y que se mantengan en la misma página".

En la siguiente sección, aprenderás a manipular imágenes con CSS.

Insertar imágenes | Imágenes y CSS;

Recomendado para ti