Assigner ou remplacer dynamiquement des images

Comment changer une image, ou le fond de la page, une fois que celle-ci est affichée par le navigateur?

C'est très facile, il suffit d'assigner un fichier différent à l'attribut src de la balise img. Pas exemple cette image est affichée:

Voici le code:

<img src="feed-blue.png" /> 

Et vous voulez remplacer cette image par une autre, lorsqu'un évènement quelconque survient, par exemple si l'utilisateur clique sur l'image.
Mais pour assigner le nouveau fichier image, il vous faut un minimum de connaissance de l'interface du DOM (Document Object Model, ou modèle objet document).

Utilisation de DOM

Une des méthodes essentielles est getElementsByTagName().
Cette méthode permet d'accéder à la balise img, en retournant le liste de toutes les balises img, puis en y accédant à l'élément voulu dans la liste avec la méthode item(). On donne le numéro de l'image:

var x = document.getElementsByTagName("img").item(0);

La première image a le numéro 0, et puisqu'il n'y a qu'une image dans notre exemple, ce sera donc item(0).

Il est encore plus facile d'accéder à une balise si elle possède un identifieur:

<img id="image0" src="feed-blue.png" />

Dans ce cas, la balise est désignée directement par son id avec la fonction getElementByID():

var x = document.getElementById("image0");

Une autre fonction d'interface permet d'accéder à un attribut et de lui assigner une valeur: setAttribute(x, y).
X est le nom de l'attribut, "src" pour nous, et y est la valeur à assigner. On peut aussi l'utiliser pour ajouter un attribut qui n'existe pas.
Pour remplacer l'image feed-blue.jpg par une autre, dont le nom est feed-orange.png, l'instruction est:

x.setAttribute("src", "feed-orange.png");

Le code JavaScript

Pour une meilleure démonstration du système, nous allons alterner les images de couleur bleue et orange.
Voila le script complet:

function changeImage(element)
{
  var x = element.getElementsByTagName("img").item(0);
  var v = x.getAttribute("src");
  if(v == "feed-blue.png")
    v = "feed-orange.png");
  else
    v = "feed-blue.png");
  x.setAttribute("src", v);	
}

La fonction sera appelée par un clic sur l'image:

<img id="image0" src="feed-blue.png" onclick="changeImage(this);" /> 

Elle peut être aussi appelée par un formulaire:

<form name="alternate" method="POST" action="">
   <input type="button" value="Change" onclick="changeImage(document.getElementById("image0");">
</form>

Pré-chargement d'une image

Si l'image est assez longue à charger, il serait mieux de la charger d'abord en mémoire avant de l'afficher.
Ce sera fait par le code qui suit:

var z = new Image(); 
z.src = "background.jpg"; 

Changer l'image de fond de page

Cela peut être accompli en assignant le nom d'un fichier image à l'attribut background de la balise body. Il ne faut pas que cette balise ait déjà une image donnée par une feuille de style (CSS).
Voici le code complet:

var z = new Image(); 
z.src = "road.jpg"; 
document.body.background=z.src; 

Il vous faut une bouton quelconque pour passer la commande, comme ci-dessous(patienter un instant pour le chargement de l'image):

Voir le code JavaScript complet.

Démonstration pour alterner les fonds de page.

Forum: Changer dynamiquement des images en arrière-plan.