Posted October 6, 200915 yr 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
October 6, 200915 yr 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)
October 6, 200915 yr Author 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.
October 6, 200915 yr 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.
October 7, 200915 yr 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).
October 7, 200915 yr 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.
October 7, 200915 yr 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
October 7, 200915 yr 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.
November 30, 200915 yr 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
December 2, 200915 yr Je pense que ceci t'intéressera : http://css-tricks.com/perfect-full-page-background-image/
January 29, 201015 yr 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.
Archived
This topic is now archived and is closed to further replies.