Autor publikacji
Virtual Patriot - Administrator

img

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu img

Element img reprezentuje zasób internetowy w postaci pliku graficznego typu .png, .gif, .jpeg, .pdf, .xml (z SVG), .apng, .svg lub .mng.

Dodatkowe techniczne informacje o elemencie img

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<figure>
  <figcaption>Mój ulubiony owoc</figcaption>
  <img src="owoc-01.png" alt="zdjęcie czereśni">
</figure>

Kontekstem zewnętrznym przykładowego elementu "img" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "img".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty
składnia HTML

<img>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

  • inline-block (jeżeli zasób internetowy reprezentowany przez dany element img został poprawnie dołączony do danego dokumentu HTML)

  • inline (jeżeli zasób internetowy reprezentowany przez dany element img nie został poprawnie dołączony do danego dokumentu HTML)

Dodatkowe domyślne reguły CSS elementu img

/* jeżeli element "img" posiada atrybut "usemap" */
img[usemap] {
  color:#00F;
}

/* jeżeli zasób internetowy reprezentowany przez element "img" został poprawnie dołączony do dokumentu HTML */
img {
  display:inline-block;
}

Interpretacja elementu img

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Interpretuje atrybut crossorigin, lecz od wersji "11".

Edge

tak

Opis atrybutów elementu img

alt

Przeznaczenie atrybutu alt

Atrybut alt wykorzystany wraz z elementem img określa treść alternatywną (zamienną) w postaci tekstu, który powinien pojawić się w oknie przeglądarki internetowej w sytuacji gdy obrazek reprezentowany przez dany element img nie może (z jakiegoś powodu) zostać obsłużony przez przeglądarkę internetową.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu alt

tekst alternatywny

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tekstu alternatywnego.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-1.png" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Zasobem internetowym reprezentowanym przez przykładowy element "img" jest obrazek znajdujący się pod adresem "https://webkod.pl/files/html/zwierze-1.png", jednak wspomniany adres obrazka jest nieprawidłowy, dlatego przeglądarka internetowa nie mogła wyświetlić w swoim oknie wspomnianego obrazka, lecz przeglądarka internetowa wyświetliła w swoim oknie treść alternatywną w postaci ciągu znaków "zdjęcie lwa", ponieważ do wspomnianego elementu "img" został dodany atrybut "alt" wraz z wartością "zdjęcie lwa".

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem img określa, w jaki sposób dany element img reprezentujący zasób internetowy ma reagować na mechanizm umożliwiający wymienianie się zasobami internetowymi pomiędzy serwerami znajdującymi się w różnych domenach (tzw. CORS, czyli Cross-Origin Resource Sharing).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

anonymous (gdy nie podaliśmy wartości)

anonymous (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu crossorigin

anonymous

Wartość anonymous oznacza, że nie jest wymagane potwierdzenie tożsamości użytkownika.

use-credentials

Wartość use-credentials oznacza, że jest wymagane potwierdzenie tożsamości użytkownika, np. za pomocą COOKIES (tzw. ciasteczka), za pomocą certyfikatu SSL po stronie klienta lub za pomocą uwierzytelnienia HTTP.

height

Przeznaczenie atrybutu height

Atrybut height wykorzystany wraz z elementem img określa wartość wysokości, jaką powinien posiadać dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu height

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-01.png" height="150" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Wartość wysokości przykładowego elementu "img" wynosi "150" pikseli, ponieważ do wspomnianego elementu "img" został dodany atrybut "height" wraz z wartością "150".

ismap

Przeznaczenie atrybutu ismap

Atrybut ismap wykorzystany wraz z elementem img określa czy informacja o współrzędnych kliknięcia na obrazek reprezentowany przez dany element img powinna zostać dołączona do adresu URI.

Atrybut "ismap" ma sens tylko wtedy gdy dany element "img" jest elementem potomkiem elementu a, który posiada atrybut href.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu ismap

ismap

Atrybut ismap jest atrybutem logicznym elementu img.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p>
      <a href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-img">
        <img src="https://webkod.pl/files/html/zwierze-01.png" alt="obrazek reprezentujący mapę współrzędnych" ismap>
      </a>
    </p>

  </body>
</html>

Rezultat

obrazek reprezentujący mapę współrzędnych

W momencie kliknięcia przez użytkownika na obrazek reprezentowany przez przykładowy element "img" współrzędne wspomnianego kliknięcia zostaną dołączone do adresu zasobu internetowego reprezentowanego przez element "a", który jest elementem przodkiem wspomnianego elementu "img", ponieważ do wspomnianego elementu "img" został dodany atrybut "ismap".

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem img określa adres zasobu internetowego, który powinien być reprezentowany przez dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "img" jest zasób internetowy "zwierze-01.png" znajdujący się pod adresem "https://webkod.pl/files/html/zwierze-01.png", dlatego do wspomnianego elementu "img" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/zwierze-01.png".

usemap

Przeznaczenie atrybutu usemap

Atrybut usemap wykorzystany wraz z elementem img określa, która mapa klikalnych obszarów powinna zostać powiązana z danym elementem img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu usemap

map name

Należy podać (bezpośrednio po znaku # (HASH)) wartość atrybutu name interesującego nas elementu map.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <map name="mapa-1">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-audio" shape="poly" coords="19,26,19,130,129,130" alt="opis elementu - audio">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-video" shape="rect" coords="172,23,279,130" alt="opis elementu - video">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-object" shape="circle" coords="74,227,56" alt="opis elementu - object">
      <area href="https://webkod.pl/kurs-html/tagi/zawartosc-osadzona/element-embed" shape="poly" coords="175,171,253,163,209,207,269,188,265,278,231,238,192,278" alt="opis elementu - embed">
    </map>

    <img src="https://webkod.pl/files/html/klikalna-mapa-02.png" usemap="#mapa-1" alt="mapa klikalnych obszarów">

  </body>
</html>

Rezultat

opis elementu - audio opis elementu - video opis elementu - object opis elementu - embed mapa klikalnych obszarów

Mapa klikalnych obszarów reprezentowana przez element "map" posiadający atrybut "name" o wartości "mapa-1" została powiązana z przykładowym elementem "img", ponieważ do wspomnianego elementu "img" został dodany atrybut "usemap" wraz z wartością "#mapa-1".

width

Przeznaczenie atrybutu width

Atrybut width wykorzystany wraz z elementem img określa wartość szerokości, jaką powinien posiadać dany element img.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu width

liczba

Należy podać nieujemną liczbę całkowitą.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <img src="https://webkod.pl/files/html/zwierze-01.png" width="200" alt="zdjęcie lwa">

  </body>
</html>

Rezultat

zdjęcie lwa

Wartość szerokości przykładowego elementu "img" wynosi "200" pikseli, ponieważ do wspomnianego elementu "img" został dodany atrybut "width" wraz z wartością "200".