Redimensionner une fenêtre contextuelle pour s'adapter à une taille d'image

Cet article montre une solution JavaScript intelligente pour redimensionner dynamiquement les fenêtres contextuelles pour s'adapter parfaitement aux images qu'ils affichent. La technique fonctionne sur divers navigateurs, notamment Netscape Navigator 4/5/6/7 et Internet Explorer 4/5/6.

La solution implique deux fichiers: une page HTML principale contenant des liens vers des images et un fichier html contextuel (popup.htm).

La page HTML principale comprend des liens qui, lorsqu'ils cliquent, appellent une fonction JavaScript PopupPic(). Cette fonction s'ouvre popup.htm dans une nouvelle fenêtre, passant l'URL de l'image via la chaîne de requête:

function PopupPic(sPicURL) {
    window.open("popup.htm?" + sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
}

popup.htm utilise JavaScript pour extraire l'URL d'image de la chaîne de requête, puis insère dynamiquement la balise <img alt="Redimensionner une fenêtre contextuelle pour s'adapter à une taille d'image" > dans la page à l'aide de document.write(). Surtout, il utilise l'événement onload pour appeler la fonction FitPic() une fois l'image chargée:

var arrTemp = self.location.href.split("?");
var picUrl = (arrTemp.length > 1) ? arrTemp[1] : "";
var NS = (navigator.appName == "Netscape") ? true : false;

function FitPic() {
    var iWidth = (NS) ? window.innerWidth : document.body.clientWidth;
    var iHeight = (NS) ? window.innerHeight : document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight);
    self.focus();
};

document.write("<img  src="%22%20+%20picUrl%20+%20%22" border="0" alt="Redimensionner une fenêtre contextuelle pour s'adapter à une taille d'image" >");

La fonction FitPic() calcule la différence entre les dimensions de l'image et les dimensions de la fenêtre du navigateur. Il utilise ensuite window.resizeBy() pour ajuster la taille de la fenêtre contextuelle en conséquence, assurant un ajustement parfait.

Cette méthode résout élégamment le problème commun de la fenêtre contextuelle et des tailles d'image incompatibles, offrant une expérience de visualisation d'images conviviale. L'efficacité du script et la compatibilité entre les navigateurs en font un outil précieux pour les webmasters gérant les galeries d'images.

Questions fréquemment posées (FAQ): (résumé pour la brièveté)

• Assurer le redimensionnement de la fenêtre contextuelle: Utilisez JavaScript pour obtenir dynamiquement les dimensions de l'image et définir la taille de la fenêtre contextuelle en conséquence.
• meilleures pratiques: Évitez de dépasser la taille de la fenêtre, de maintenir le rapport d'aspect, de fournir un bouton de fermeture et de tester sur différentes tailles d'écran.
• Redimensionnement des images en javascript: Utilisez l'élément de toile pour un redimensionnement de haute qualité.
• Tailles contextuelles recommandées: Desktop: ~ 700-800px de large, 500-600px de haut; Mobile: ~ 300-350px de large, 200-250 pix de haut. S'adapter au contenu et à la conception.
• Redimensionnement lisse: Utilisez des toiles drawImage avec smoothingQuality = 'high'.
• Conception popup des meilleures pratiques: Gardez les choses simples, utilisez une messagerie claire et facilitez la fermeture.
• Popups réactives: Utilisez les requêtes multimédias CSS et JavaScript pour les ajustements dynamiques.
• Tests sur différentes tailles d'écran: Utiliser les fonctionnalités d'émulation des outils du développeur de navigateur.

Cette réponse révisée fournit une explication plus concise et lisible tout en conservant les informations de base et en maintenant l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!