← Tous les articles

Guides

Règles de zoom au survol et de téléchargement rapide des images

17 mai 2026 · par JustZix Team

Les images sont l'autre moitié de la prise de contrôle des médias. Ce guide rassemble trois règles JustZix pour travailler avec les images : zoom au survol, chargement immédiat pour que rien ne reste vide, et un bouton de téléchargement rapide qui respecte les règles de même origine.

Zoom au survol, en CSS seul

L'amélioration la plus simple ne nécessite aucun JavaScript. Une transformation CSS agrandit une image quand vous la survolez, ce qui suffit à lire les détails fins sans ouvrir une lightbox.

img {
  transition: transform .18s ease;
}

img:hover {
  transform: scale(1.6);
  position: relative;
  z-index: 2147483647;
}

Mettre à l'échelle avec transform garde la mise en page stable car l'image occupe toujours sa boîte d'origine. Le z-index élevé au survol fait flotter l'image agrandie au-dessus du contenu voisin au lieu d'être rognée.

Une loupe précise avec JavaScript

Pour les images détaillées, une loupe qui suit le curseur bat une mise à l'échelle plate. Cette règle suit le pointeur et déplace l'origine de transformation de l'image vers l'endroit sous le curseur.

(function () {
  document.addEventListener('pointermove', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG') { return; }
    var r = img.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width) * 100;
    var y = ((e.clientY - r.top) / r.height) * 100;
    img.style.transformOrigin = x + '% ' + y + '%';
  }, true);
  document.addEventListener('pointerenter', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = 'scale(2.4)';
      e.target.style.transition = 'transform .12s';
    }
  }, true);
  document.addEventListener('pointerleave', function (e) {
    if (e.target && e.target.tagName === 'IMG') {
      e.target.style.transform = '';
    }
  }, true);
})();

La loupe zoome vers l'endroit où se trouve le curseur, donc balayer une grande image semble naturel. Réinitialiser transform sur pointerleave ramène l'image à sa taille normale.

Forcer le chargement de chaque image

Le chargement différé est bon pour la bande passante mais agaçant quand vous voulez lire ou enregistrer une galerie entière et que la moitié est encore vide. Cette règle bascule les images différées en immédiat et lance le chargement des plus lentes.

document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
  img.loading = 'eager';
  if (img.dataset.src && !img.src) {
    img.src = img.dataset.src;
  }
  if (img.dataset.srcset && !img.srcset) {
    img.srcset = img.dataset.srcset;
  }
});

Beaucoup de sites planquent la vraie URL dans un attribut data-src et ne la copient dans src que lorsque l'image entre dans la zone visible. La copier vous-même force le chargement immédiatement. La même idée fonctionne pour srcset.

Un bouton de téléchargement en un clic

Cette règle ajoute un petit bouton de téléchargement dans le coin de chaque image quand vous la survolez. Il utilise l'attribut standard download sur une ancre, qui demande au navigateur d'enregistrer le fichier.

(function () {
  document.addEventListener('pointerenter', function (e) {
    var img = e.target;
    if (!img || img.tagName !== 'IMG' || img._dl) { return; }
    img._dl = true;
    var a = document.createElement('a');
    a.textContent = 'Enregistrer';
    a.href = img.currentSrc || img.src;
    a.download = '';
    a.style.cssText = 'position:absolute;z-index:2147483647;'
      + 'background:#111;color:#fff;font:600 11px sans-serif;'
      + 'padding:3px 7px;border-radius:5px;text-decoration:none';
    var r = img.getBoundingClientRect();
    a.style.left = (r.left + window.scrollX + 4) + 'px';
    a.style.top = (r.top + window.scrollY + 4) + 'px';
    document.body.appendChild(a);
    img.addEventListener('pointerleave', function () {
      a.remove();
      img._dl = false;
    }, { once: true });
  }, true);
})();

L'attribut download fonctionne proprement pour les images de même origine. Pour les images d'origine croisée, le navigateur peut ouvrir le fichier dans un nouvel onglet au lieu de l'enregistrer, ce qui est un comportement attendu et non quelque chose qu'une règle devrait essayer de déjouer. Utiliser currentSrc choisit la résolution que le navigateur a réellement sélectionnée dans un srcset adaptatif.

Tout assembler

• Exécutez le CSS de zoom au survol sur tout le site ; c'est peu coûteux et inoffensif.
• Réservez la loupe JavaScript aux sites riches en images comme les galeries ou la documentation.
• Combinez la règle de chargement immédiat avec le bouton de téléchargement pour que l'image soit entièrement chargée avant l'enregistrement.

Les trois sont disponibles dans nos exemples prêts à l'emploi, ou téléchargez JustZix et construisez les vôtres. Pour le côté vidéo du contrôle des médias, commencez par forcer les contrôles natifs sur chaque vidéo.