← Tutti gli articoli

Guide

Regole per lo zoom al passaggio del mouse e il download rapido delle immagini

17 maggio 2026 · di JustZix Team

Le immagini sono l'altra metà del prendere il controllo dei media. Questa guida raccoglie tre regole JustZix per lavorare con le immagini: zoom al passaggio del mouse, caricamento immediato così nulla resta vuoto, e un pulsante di download rapido che rispetta le regole della stessa origine.

Zoom al passaggio del mouse, solo con il CSS

Il miglioramento più semplice non ha bisogno di alcun JavaScript. Una trasformazione CSS scala un'immagine quando ci passi sopra, il che basta per leggere i dettagli fini senza aprire un lightbox.

img {
  transition: transform .18s ease;
}

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

Scalare con transform mantiene stabile il layout perché l'immagine occupa ancora il suo box originale. L'alto z-index al passaggio del mouse fa sì che l'immagine ingrandita fluttui sopra il contenuto vicino invece di essere tagliata.

Una lente di precisione con JavaScript

Per immagini dettagliate, una lente che segue il cursore batte una scala piatta. Questa regola traccia il puntatore e sposta l'origine della trasformazione dell'immagine sul punto sotto il cursore.

(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 lente ingrandisce verso il punto in cui si trova il cursore, così spostarsi su una grande immagine sembra naturale. Reimpostare transform su pointerleave riporta l'immagine alla dimensione normale.

Forza il caricamento di ogni immagine

Il caricamento pigro è buono per la banda ma fastidioso quando vuoi leggere o salvare un'intera galleria e metà di essa è ancora vuota. Questa regola passa le immagini pigre a immediate e spinge quelle lente al caricamento.

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;
  }
});

Molti siti nascondono l'URL reale in un attributo data-src e lo copiano in src solo quando l'immagine entra nella vista. Copiarlo tu stesso forza il caricamento immediato. La stessa idea funziona per srcset.

Un pulsante di download con un clic

Questa regola aggiunge un piccolo pulsante di download all'angolo di ogni immagine quando ci passi sopra. Usa l'attributo standard download su un'ancora, che chiede al browser di salvare il file.

(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 = 'Salva';
    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'attributo download funziona in modo pulito per le immagini della stessa origine. Per le immagini cross-origin il browser può aprire il file in una nuova scheda invece di salvarlo, il che è un comportamento atteso e non qualcosa che una regola dovrebbe cercare di sconfiggere. Usare currentSrc sceglie la risoluzione che il browser ha effettivamente scelto da un srcset reattivo.

Mettere tutto insieme

• Esegui il CSS dello zoom al passaggio del mouse a livello di sito; è economico e innocuo.
• Riserva la lente JavaScript ai siti ricchi di immagini come gallerie o documentazione.
• Combina la regola del caricamento immediato con il pulsante di download così l'immagine è completamente caricata prima che tu la salvi.

Tutte e tre sono disponibili nei nostri esempi pronti all'uso, oppure scarica JustZix e costruisci le tue. Per il lato video del controllo dei media, inizia con come forzare i controlli nativi su ogni video.