Posté(e) le 6 octobre 200915 a Bonjour à tous. Voilà que depuis hier soir je recherche un script, un CSS, un code magique en vain, pour avoir le moyen d'adapter une image suivant la résolution de l'écran de la personne. Voilà le dernier que j'ai retenu, qui marche chez moi : <script type="text/javascript"> var resolution = screen.width + "*" + screen.height; switch(resolution) { case "800*600": document.body.background = "bg800-600.jpg"; break; case "1024*768": document.body.background = "bg1024-768.jpg"; break; case "1152*864": document.body.background = "bg1152-864.jpg"; break; case "1280*720": document.body.background = "bg1280-720.jpg"; break; case "1280*768": document.body.background = "bg1280-768.jpg"; break; case "1280*800": document.body.background = "bg1280-800.jpg"; break; case "1280*960": document.body.background = "bg1280-960.jpg"; break; case "1280*1024": document.body.background = "bg1280-1024.jpg"; break; case "1360*768": document.body.background = "bg1360-768.jpg"; break; case "1600*900": document.body.background = "bg1600-900.jpg"; break; case "1600*1024": document.body.background = "bg1600-1024.jpg"; break; case "1680*1050": document.body.background = "bg1680-1050.jpg"; break; case "1900*1200": document.body.background = "bg1900-1200.jpg"; break; case "2560*1600": document.body.background = "bg2560-1600.jpg"; break; } </script> Seulement manque de bol... on viens de me rapporter que sur un ordi, le fond ne s'affiche pas. La tuile !!! J'en conclue que ce script est totalement instable... Y aurait il donc une bonne ici qui puisse m'aider ? Je vous remercie grandement par avance. A très vite
Posté(e) le 6 octobre 200915 a résolution sur le poste où ça ne fonctionne pas ? sans doute en manque-t-il à ta liste, d'autant plus que tu n'as pas mi de "fond par défaut" (condition par defaut du switch)
Posté(e) le 6 octobre 200915 a Auteur Malheureusement je ne m'y connais pas assez (donc pas du tout ) pour adapter ce script trouvé sur la toile à mon besoin (si ce script est bien sûr, bien écrit.... ). La résolution où le poste n'a pas "trouvé" le fond est pourtant de 1024*768 Merci de ton (votre ?) aide.
Posté(e) le 6 octobre 200915 a Il faudrait que tu regardes déjà s'il n'y a pas une erreur javascript dans le navigateur sur lequel ça ne fonctionne pas. S'il n'y en a pas, tu peux utiliser cette version modifiée, ce qui va afficher la résolution donnée par le navigateur, comme ça tu pourras voir la taille réelle dont tu as besoin : <script type="text/javascript"> var resolution = screen.width + "*" + screen.height; switch(resolution) { case "800*600": document.body.background = "bg800-600.jpg"; break; case "1024*768": document.body.background = "bg1024-768.jpg"; break; case "1152*864": document.body.background = "bg1152-864.jpg"; break; case "1280*720": document.body.background = "bg1280-720.jpg"; break; case "1280*768": document.body.background = "bg1280-768.jpg"; break; case "1280*800": document.body.background = "bg1280-800.jpg"; break; case "1280*960": document.body.background = "bg1280-960.jpg"; break; case "1280*1024": document.body.background = "bg1280-1024.jpg"; break; case "1360*768": document.body.background = "bg1360-768.jpg"; break; case "1600*900": document.body.background = "bg1600-900.jpg"; break; case "1600*1024": document.body.background = "bg1600-1024.jpg"; break; case "1680*1050": document.body.background = "bg1680-1050.jpg"; break; case "1900*1200": document.body.background = "bg1900-1200.jpg"; break; case "2560*1600": document.body.background = "bg2560-1600.jpg"; break; default: alert(resolution); break; } </script> En fait ça affiche la résolution si la résolution n'est pas trouvée.
Posté(e) le 7 octobre 200915 a mouai, le alert, c'est du debug de toute façon, il faut gérer un cas par défaut pour les résolution batardes garde le defaut comme ci-dessus, et colle un document.body.background (avec le fond que tu veux par défaut) sinon, pour simplifier les choses: document.body.background = "img_resize.php?sizex="+screen.width+"&sizey="+screen.height; tu crées un fichier img_resize.php <? $background="bg-2560-1600.jpg"; $sx = isset($_REQUEST['sizex']) ? $_REQUEST['sizex'] : 150; $sy = isset($_REQUEST['sizey']) ? $_REQUEST['sizey'] : 150; passthru("cat $background | jpegresize $sx $sy"); ?> le script récupère donc les dimensions, et retaille l'image à celles demandés (avec jpegresize, check ton inbox, je t'ai MP les détails/code).
Posté(e) le 7 octobre 200915 a Au pire tu t'arranges pour que dans le cas où tu tombes sur une résolution exotique, le site reste utilisable mais juste un peu moins beau. Parce que dans ta liste il manque le 800x480 par exemple (eeePC 7xx), ainsi que les résolution utilisées par les terminaux mobiles. Sinon la solution proposée par Mephisto est bien mieux, et serait encore meilleure avec la gestion d'un cache pour éviter d'appeler jpegresize (ou équivalent, par exemple la librairie PHP GD) à chaque requête.
Posté(e) le 7 octobre 200915 a Ah oui c'est une solution temporaire pour qu'il voie la résolution du poste qui l'interesse, la proposition de Mephisto est bien mieux sur le long terme
Posté(e) le 7 octobre 200915 a Mephisto > Fais attention à la surcharge du serveur ! Redimensionner a la volée est très lourd. Sinon en JS tu peux faire quelque chose du style : if (screen.width<=800 && screen.height<=600) { document.body.background = "bg800-600.jpg"; } else if (screen.width<=1024 && screen.height<=768) { document.body.background = "bg1024-768.jpg"; } else if (screen.width<=1280 && screen.height<=720) { [...] } else { document.body.background = "bg2560-1600.jpg"; // Le plus grand possible } Tu peux peut être aussi jouer sur le CSS depuis javascript pour redimensionner.
Posté(e) le 30 novembre 200915 a Ah c'est toi qui as développé le site de Ségolène ? * bonjour méssieurs, j'annonce une dépréssion vive dans ces prochainnes heures, je marrache les cheveux! jai essayer et j'ai meme mis un code d'alerte mais rien ne s'affiche dans mon header, alors je commence a me demander si je place bien le code au bon endroit..Par désespoir je vous met le code de l'index.php de mon template(c'est dans cuila que je met le code ).Juskici jai mis direct le code javascript entre <div id="headerbar"> et </div> .A priori je pense que c'est ici que ca se passe puisque si je met simplement un <img src="repertoire/image.gif"> jai bien l'image qui apparait dans mon header.. Si quelqu'un veut bien se pencher sur mon pb de fille ce serait simpa. <?php /** * @package yoo_symphony Template * @version 1.5.2 2009-11-05 11:26:17 * @author YOOtheme http://www.yootheme.com * @copyright Copyright © 2007 - 2009 YOOtheme GmbH */ // no direct access defined('_JEXEC') or die('Restricted access'); JHTML::_('behavior.mootools'); // include config include_once(dirname(__FILE__).'/config.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head> <jdoc:include type="head" /> <link rel="apple-touch-icon" href="<?php echo $template->url ?>/apple_touch_icon.png" /> </head> <body id="page" class="yoopage <?php echo $this->params->get('columns'); ?> <?php echo $this->params->get('itemcolor'); ?> <?php echo $this->params->get('toolscolor'); ?>"> <?php if($this->countModules('absolute')) : ?> <div id="absolute"> <jdoc:include type="yoomodules" name="absolute" /> </div> <?php endif; ?> <div id="page-header"> <div class="page-header-1"> <div class="page-header-2"> <div class="page-header-3"> <div class="wrapper"> <div id="header"> <div id="toolbar"> <?php if($this->params->get('date')) : ?> <div id="date"> <?php echo JHTML::_('date', 'now', JText::_('DATE_FORMAT_LC')) ?> </div> <?php endif; ?> <?php if($this->countModules('toolbarleft')) : ?> <div class="left"> <jdoc:include type="yoomodules" name="toolbarleft" style="yoo" /> </div> <?php endif; ?> <?php if($this->countModules('toolbarright')) : ?> <div class="right"> <jdoc:include type="yoomodules" name="toolbarright" style="yoo" /> </div> <?php endif; ?> </div> <div id="headerbar"> <script type="text/javascript"> var resolution = screen.width + "*" + screen.height; switch(resolution) { case "800*600": document.body.background = "bg800-600.jpg"; break; case "1024*768": document.body.background = "bg1024-768.jpg"; break; case "1152*864": document.body.background = "bg1152-864.jpg"; break; case "1280*720": document.body.background = "bg1280-720.jpg"; break; case "1280*768": document.body.background = "bg1280-768.jpg"; break; case "1280*800": document.body.background = "bg1280-800.jpg"; break; case "1280*960": document.body.background = "bg1280-960.jpg"; break; case "1280*1024": document.body.background = "bg1280-1024.jpg"; break; case "1360*768": document.body.background = "bg1360-768.jpg"; break; case "1600*900": document.body.background = "bg1600-900.jpg"; break; case "1600*1024": document.body.background = "bg1600-1024.jpg"; break; case "1680*1050": document.body.background = "bg1680-1050.jpg"; break; case "1900*1200": document.body.background = "bg1900-1200.jpg"; break; case "1920*1080": document.body.background = "url(templates/images/fleche.png)"; break; case "2560*1600": document.body.background = "bg2560-1600.jpg"; break; default: alert(resolution); break; } </script> </div> Jessica
Posté(e) le 2 décembre 200915 a Je pense que ceci t'intéressera : http://css-tricks.com/perfect-full-page-background-image/
Posté(e) le 29 janvier 201015 a Déjà au lieu d'utiliser : document.body.background = "bg800-600.jpg"; Essaye de faire ça avec : document.body.style.backgroundImage = "url('bg800-600.jpg')"; Et si aucune résolution ne correspond tu peux toujours créer l'image dynamiquement avec un script PHP (librairie gd2). Ou mieux, enregistre les résolutions d'écran de tes utilisateurs, ça te permettra de savoir quelles résolutions il te manquent.
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.