13. Imatges

 

Índex

Gestió de les imatges

El JavaScript permet el canvi d'una imatge per una altra. Cada canvi s'obté mitjançant un mandat d'assignació, que respon a l'esquema general

L'objecte és l'espai que, dins del document, conté la imatge; aquest espai es pot denominar de dues maneres diferents:

Aquest objecte té una propietat, que és l'origen de la imatge continguda, que es representa amb .src.

I el valor és el nom del fitxer que conté la imatge, precedit, si cal, dels detalls sobre la ruta:

Això indica la imatge anomenada logo.gif continguda en la carpeta imatges.

 

Ús de getElementById

Els espais destinats a contenir imatges poden ésser identificats amb l'atribut id; en aquest cas ens hi podem referir amb getElementById().

Exemple

A les versions anteriors de l'HTML es podia donar un nom - name - a cada un dels espais del document que conté una imatge, i fer servir expressions com ara [window.]document.espailogo.src. Aquest procediment ha quedat descartat en l'HTML 5.

 

La matriu images[n]

El conjunt dels espais per a les imatges continguts en un document HTML constitueix automàticament una matriu anomenada images[n]. El primer espai és images[0]; el segon, images[1]; el tercer, images[2], etc.:

D'aquesta manera podem estalviar-nos d'aplicar l'atribut id a les etiquetes <img>. Com ja sabem, la contrapartida negativa és que si modifiquem l'estructura d'un document fet anteriorment, la numeració dels espais per a imatges pot variar totalment.

Exemple

 

 

Les imatges com suports d'esdeveniments

Les imatges no solament poden ser l'objectiu d'un programa en JavaScript. Mitjançant l'ús de gestors d'esdeveniments com onClick i d'altres que veurem, les imatges poden generar un canvi qualsevol en el document, o el canvi d'aquest.

Exemple

El canvi generat pot afectar el propi espai que conté la imatge.

Exemple

 

Objectes i exemplars

Entre els objectes previstos en el JavaScript n'hi ha diversos de genèrics, inherents al programa, com ara Date() i Image(), que el programador pren com a matriu a partir de la qual en construeix tants exemplars (instances) com li facin falta. Per dur-ho a terme es fan servir instruccions d'assignació com ara les següents:

on imatge1 i aramateix són noms atribuïts arbitàriament.

 

L'objecte Image()

En principi, les imatges presentades en una pàgina només es carreguen quan s'hi incorporen efectivament. Si mitjançant un mecanisme qualsevol s'ha de substituir una imatge per una altra, aquesta darrera no es carregarà fins que s'hagi activat el mecanisme. En aquestes condicions, si la connexió a internet és deficient, cada canvi d'imatges comporta una aturada, ni que sigui petita, del procés de canvi.

Amb l'us de l'objecte Image() carreguem inicialment totes les imatges, cada una de les quals esdevé un exemplar de l'objecte. Arribat el moment, no s'invocaran les imatges externes sinó els exemplars d'Image() que les contenen:

nom és la denominació del nou objecte; lloc és la denominació de l'espai que ha de contenir la imatge. Un i altre es fixen lliurement. Podem crear tants objectes d'imatge com volguem.

Exemple