(X)HTML

Img

<img>


Znacznik służy do wyświetlania obrazków.

Sposób użycia


Po wpisaniu:

<img src="http://4programmers.net/bin/coyote.jpg" width="57" height="90" alt="coyote">

Otrzymamy mniej więcej taki wynik:

coyote

Zamykanie tagu


W języku HTML tag <img> nie ma wcale zakończenia. W XHTML-u natomiast należy go zakończyć tak:

<img src="obrazek.gif" alt="obrazek" />

Użycie obrazka jako tła


Tag <img> nie najlepiej nadaje się do ustalania tła obrazkowego dla innych  elementów strony, w tym celu lepiej zastosować style CSS - background-image lub background, np:

<div style="background-image: url('obrazek.png');">

Atrybuty


  • src (wymagany) - URI obrazka
  • alt (wymagany) - tekst alternatywny; pojawia się, jeśli obrazek nie mógł być wyświetlony. Nie jest to tekst, który ma się pojawić w dymku po zatrzymaniu kursora nad obrazkiem.
  • Id - identyfikator
  • Class - klasa CSS
  • Style - przypisany styl CSS
  • longdesc - URI dłuższego opisu obrazka
  • name (pozostawiony dla kompatybilności wstecz) - określa identyfikator obrazka w dokumencie
  • title
  • lang
  • width
  • height
  • ismap (pusty)
  • usemap - URI mapy
  • xml:lang (XHTML)

width i height


Atrybuty width i height znaczników img oraz object nie są przestarzałe - przeciwnie, ich stosowanie jest zalecane. Niektórzy mogą tym być zdziwieni - przecież to atrybuty wizualne, a miało być tak łebdwazerowo i semantycznie. Otóż atrybuty te zostawiono po to, by przeglądarki mogły zarezerwować miejsce na obrazki zanim się załadują. Brak tych atrybutów może być niekiedy dość irytujący.

Zobacz: http://riddle.jogger.pl/2006/0[...]-dla-obrazkow-podane-w-kodzie/

ismap


Standard opisuje ten atrybut następująco:
<quote>
Server-side image maps may be interesting in cases where the image map is too complicated for a client-side image map.

It is only possible to define a server-side image map for the IMG and INPUT elements. In the case of IMG, the IMG must be inside an A element and the boolean attribute ismap ([CI]) must be set. In the case of INPUT, the INPUT must be of type "image".

When the user activates the link by clicking on the image, the screen coordinates are sent directly to the server where the document resides. Screen coordinates are expressed as screen pixel values relative to the image. [...]
[...]

The location clicked is passed to the server as follows. The user agent derives a new URI from the URI specified by the href attribute of the A element, by appending `?' followed by the x and y coordinates, separated by a comma. The link is then followed using the new URI. [...]

User agents that do not offer the user a means to select specific coordinates (e.g., non-graphical user agents that rely on keyboard input, speech-based user agents, etc.) should send the coordinates "0,0" to the server when the link is activated.
</quote>
<http://www.w3.org/TR/html401/struct/objects.html#h-13.6.2>

Oznacza to mniej więcej tyle, że jeśli znacznik img z tym arybutem znajduje się wewnątrz łącza, oraz gdy użytkownik kliknie na obrazek opisany tym znacznikiem, do adresu URI łącza dopisywany jest ciąg składający się ze znaku zapytania i współrzędnych kursora w pikselach rozdzielonych przecinkiem. Niewizualne przeglądarki powinny dopisać ciąg „?0,0”.

Zdarzenia


2 komentarze

Kooba 2006-02-11 14:03

Poprawiłem...

Ale wiesz co Ktoś.. teraz zrobie taka tabelke jak na w3scools jakie tagi sa w danej wersji języka (html, xhtml strict, translational, frameset) to powinno ułatwić troche prace nad tym działem :)

Ktos 2006-02-11 13:52

Do wstawiania atrybutów i zdarzeń stosuj szablony: Template:Atrybuty_dla_CSS (Id, Class, Style) i Template:Zdarzenia_HTML

Atrybuty i zdarzenia powinny być w kategoriach (X)HTML/Atrybuty i (X)HTML/Zdarzenia

Ale miło, że ktoś oprócz mnie chce coś pisać w dziale (X)HTML :)