7. Imatges

 

Índex

Incorporació d'imatges en un document HTML

Els documents HTML poden reservar espais per a la inserció d'imatges.

Una imatge és constituïda per un mapa de bits; és a dir, per una quadrícula de punts molt petits, per a cada un dels quals està especificada la intensitat del vermell, del verd i del blau. El format més bàsic dels mapes de bits és el .bmp. Aquest format és, a la pràctica, no es fa servir gaire a Internet, a causa del gran volum del fitxer, que comporta una velocitat de circulació reduïda.

Això ha obligat a desenvolupar diversos tipus de formats de menys pes: s'hi perd, d'una manera o altra, informació - i per tant qualitat -, però s'hi estalvia espai de memòria i s'hi guanya velocitat. Els més emprats són:

 

L'etiqueta IMG

La incorporació de les imatges al document s'aconsegueix amb l'etiqueta <img /> (<img>, sense etiqueta final), i la localització de la imatge amb l'atribut src. Cal afegir-hi l'atribut alt:

L'atribut adreça serveix per a indicar l'adreça - llarga o curta - de la imatge, amb els mateixos criteris que en el cas dels hipervincles.

L'ús d'alt assegura la presentació del text en el cas que per qualsevol motiu no es reproduís la imatge.

L'element IMG no pot anar inserit directament a BODY, sinó dins P, TD, H1 (i similars), DIV i alguns altres.

Exemple

Es pot atribuir a la imatge una alçada i amplada diferents de les reals, però es perd qualitat, especialment si fem una ampliació. I en tot cas és molt important que es respectin les proporcions entre les dues dimensions.

En aquests casos s'ha d'especificar l'amplada i l'alçada de la imatge, en píxels:

Fora d'aquest cas, l'ús estàndard exigeix no especificar l'alçada i l'amplada; els navegadors ja hi atribueixen automàticament les dimensions reals.

Exemple

Si un document ha de tenir diverses imatges i fragments de text intercalats, és molt recomanable de fixar les posicions relatives dels diversos elements, bé mitjançant una taula, bé amb especificacions d'estil (Vegeu més endavant).

 

Imatges com a hipervincles

En comptes d'un text, podem fer servir una imatge com a origen d'un hipervincle. La sintaxi és

Exemple

 

Mapes d'imatge

Podem associar hipervincles diferents a sectors diferents d'una imatge; això s'aconsegueix mitjançant l'especificació d'un mapa d'imatge.

Un mapa d'imatge s'indica amb un element delimitat per <map>...</map>, que té un identificador. L'identificador estàndard és id, obligatori per a un document ben format. Alguns navegadors antics no el reconeixen, i per aquest motiu ha estat costum d'afegir name, amb el mateix valor per a ambdós atributs.

Dins aquest element hi ha un o més elements <area /> (<area>, sense etiqueta final), un per a cada un dels sectors que calgui definir. La definició s'obté amb les propietats shape (forma), coords (coordenades), href (origen del document cridat) i alt (explicació alternativa, com en les imatges)

Cal associar aquest mapa d'imatge a la imatge, mitjançant usemap, que especifica el nom que ha rebut el mapa d'imatge:

on mapa és un nom qualsevol, adreça1 és l'adreça - curta o llarga - de la imatge, i adreça2, adreça3, etc. són les adreces dels documents associats amb cada un dels sectors del mapa d'imatge.

Podem triar tres formes diferents: rectangular (shape="rect"), poligonal (shape="poly") i circular (shape="circle"),

Pel que fa a les coordenades dels punts delimitadors, s'indiquen així:

Exemple

Totes les eines de tractament d'imatges tenen recursos per a determinar les coordenades de qualsevol punt d'aquesta. Hi ha, a més, programes especials - autònoms o dins d'un editor HTML - que generen el codi d'una manera interactiva i sense d'haver-se d'ocupar de les coordenades.

 

Superfície per a dibuixar-hi

Amb l'etiqueta <canvas>, pròpia de l'HTML 5, es crea una superfície de dibuix. Cal especificar-ne l'amplada i l'alçada; això es fa amb els atributs height i width.

Amb els recursos de l'(X)HTML sols, no es pot fer altra cosa que delimitar l'espai. Amb el recurs a les especificacions CSS se'n pot especificar la posició i una vora, que per defecte és invisible. Per a actuar-hi, és imprescindible el recurs al JavaScript.

Nota: Aquest element forma part de l'especificació HTML 5, i només és reconeguda pels navegadors més moderns. En el cas de l'Explorer de Microsoft, només es pot fer servir en la versió 9, i en la 8 amb el suport d'un programa de JavaScript anomenat excanvas.js, de distribució lliure.

Exemple

 

 

Les classes

 

Sovint volem que en un document hi hagi dues o més variants d'elements P (o de qualsevol altre tipus d'element). En aquests casos se'n creen diverses classes, una per a cada variant. Es defineixen a HEAD i s'apliquen dins BODY, com ho mostra l'exemple:

A HEAD:

  • p.a { color: #0000ff }
  • p.b { text-align: center }

I a BODY:

  • <p class="a">...</p>
  • <p class="b">...</p>

Exemple