Aperçu d'image au survol (JS)
Affiche un grand aperçu flottant de l'image près du curseur au survol d'une miniature.
Code à copier
// Show a large floating preview of an image while the cursor is over it.
var box = document.createElement('div');
box.style.cssText = 'position:fixed;z-index:2147483647;pointer-events:none;' +
'border:2px solid #fff;box-shadow:0 4px 24px rgba(0,0,0,.5);display:none;';
var preview = document.createElement('img');
preview.style.cssText = 'max-width:480px;max-height:480px;display:block;';
box.appendChild(preview);
document.body.appendChild(box);
document.addEventListener('mouseover', function (e) {
var img = e.target.closest && e.target.closest('img');
if (!img || !img.currentSrc) { box.style.display = 'none'; return; }
preview.src = img.currentSrc;
box.style.display = 'block';
});
document.addEventListener('mousemove', function (e) {
box.style.left = Math.min(e.clientX + 20, innerWidth - 500) + 'px';
box.style.top = Math.min(e.clientY + 20, innerHeight - 500) + 'px';
});
document.addEventListener('mouseout', function () { box.style.display = 'none'; });Comment utiliser cet exemple
- Copiez le code avec le bouton ci-dessus.
- Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
- Ajoutez une nouvelle règle correspondant à cette page.
- Collez le code dans le panneau JavaScript de la règle et enregistrez — il s'exécute à chaque visite de page.
Notez cet exemple
Aucune note — soyez le premier.