Help! Changer IMAGE header selon resolution
jessicatte
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
Flachy Joe Messages postés 2102 Date d'inscription Statut Membre Dernière intervention -
Flachy Joe Messages postés 2102 Date d'inscription Statut Membre Dernière intervention -
bonjour,
Messieurs, je crois que la dépréssion est proche..Je vous supplie de me lire jusqu'au bout, pour une fille je suis pas si nul quand meme !J'explique.
J'ai un template (yootheme pour ceux qui connaisse) , je vousdrais changer l'image de mon header en fonction de la resolution de l'ecran.
Je ne veux pas passer par dynamic layout css
car jai des feuille de style éclaté et ca me semble un peu compliquer juste pour se que je veux faire. Moi a la base je voulais juste capter la resolution avec javascript et assigner du css directement entre head et head en utilisant la class qui gere mon header. ex :
if (screen.width == 1440)
alors <style type="text/css">
#headerbar
background-image:url(../..test.png)
</style>
N'atons point le droit de faire ceci?
Je sais que cest déconseillé le css dans le html
mais sela m'éviterai grand domage car jpeu pas tout redirigé vers une feuille de style, mon template
est assez complexe et ya un href="<?php echo $template->url qui importe des css et on dirait qu'il faut pas trop le déranger..Je vous montre un bout de code pour voir comment ca se présente:
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>
et un peu plus loins le html qui gere mon header:
<div id="headerbar">
</div>
Please, help me.
jessica
jessica
Messieurs, je crois que la dépréssion est proche..Je vous supplie de me lire jusqu'au bout, pour une fille je suis pas si nul quand meme !J'explique.
J'ai un template (yootheme pour ceux qui connaisse) , je vousdrais changer l'image de mon header en fonction de la resolution de l'ecran.
Je ne veux pas passer par dynamic layout css
car jai des feuille de style éclaté et ca me semble un peu compliquer juste pour se que je veux faire. Moi a la base je voulais juste capter la resolution avec javascript et assigner du css directement entre head et head en utilisant la class qui gere mon header. ex :
if (screen.width == 1440)
alors <style type="text/css">
#headerbar
background-image:url(../..test.png)
</style>
N'atons point le droit de faire ceci?
Je sais que cest déconseillé le css dans le html
mais sela m'éviterai grand domage car jpeu pas tout redirigé vers une feuille de style, mon template
est assez complexe et ya un href="<?php echo $template->url qui importe des css et on dirait qu'il faut pas trop le déranger..Je vous montre un bout de code pour voir comment ca se présente:
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>
et un peu plus loins le html qui gere mon header:
<div id="headerbar">
</div>
Please, help me.
jessica
jessica
A voir également:
- Help! Changer IMAGE header selon resolution
- Changer dns - Guide
- Réduire résolution image - Guide
- Changer carte graphique - Guide
- Image iso - Guide
- Changer wifi chromecast - Guide
4 réponses
Salut,
Perso je ferais ça :
Perso je ferais ça :
<script type="text/javascript" > document.body.style.backgroundImage = "url(la/ou/est/limage.jpg)"; </script>
salut,
merci pour ta réponse, 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 gentil.
<?php
/**
* @package yoo_symphony Template
* @version 1.5.2 2009-11-05 11:26:17
* @author YOOtheme https://yootheme.com/
* @copyright Copyright (C) 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
merci pour ta réponse, 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 gentil.
<?php
/**
* @package yoo_symphony Template
* @version 1.5.2 2009-11-05 11:26:17
* @author YOOtheme https://yootheme.com/
* @copyright Copyright (C) 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
Salut,
1. Pas étonnant que rien ne s'affiche puisque l'alerte est dans un cas qui n'est jamais traité (toutes les résolutions sont traitées avant).
2. Là tu appliques une valeur à la propriété background de l'objet body, mais ce changement de valeur n'est pas interprété par le navigateur, il faut passer par style.backgroundImage
1. Pas étonnant que rien ne s'affiche puisque l'alerte est dans un cas qui n'est jamais traité (toutes les résolutions sont traitées avant).
2. Là tu appliques une valeur à la propriété background de l'objet body, mais ce changement de valeur n'est pas interprété par le navigateur, il faut passer par style.backgroundImage
<script type="text/javascript">
var resolution = screen.width + "-" + screen.height;
switch(resolution)
{
case "1920-1080":
document.body.style.backgroundImage = "url(templates/images/fleche.png)";
break;
default:
document.body.style.backgroundImage = "url(bg"+resolution+".jpg)";
break;
}
alert(resolution + " Image changée en " + document.body.style.backgroundImage );
</script>
Merci beaucoup pour ton aide, effectivement en rajoutant "style" jai bien une apparition de l'image, mais maleureusement dans un background total.
Mais ce n'est pas la bonne route pour moi, car ke m'excuse platement mais je vien de comprendre que j'avais besoin de changer l'image de mon header en fonction de la taille de la fenetre du navigateur et non de la résolution de l'écran. Je cherche, je cherche mais en vain, et personne ne semble savoir comment faire:/
Si une lumiere passe par la ce serait vraiment super aimable. Merci beaucoup a ceux qui essaie de m'aider,
Jessicat
Mais ce n'est pas la bonne route pour moi, car ke m'excuse platement mais je vien de comprendre que j'avais besoin de changer l'image de mon header en fonction de la taille de la fenetre du navigateur et non de la résolution de l'écran. Je cherche, je cherche mais en vain, et personne ne semble savoir comment faire:/
Si une lumiere passe par la ce serait vraiment super aimable. Merci beaucoup a ceux qui essaie de m'aider,
Jessicat
Ben oui ça change le background de body, donne un id à l'élément dont tu veut changer le fond puis :
récupère ses dimensions avec
Envoi ça à une page PHP qui te renverra une image redimensionnée à la volée.
Pour le script PHP de redimensionnement,ça se trouve sur le net
récupère ses dimensions avec
document.getElementById('id').offestHeight
et
document.getElementById('id').offestWidth
Envoi ça à une page PHP qui te renverra une image redimensionnée à la volée.
Pour le script PHP de redimensionnement,ça se trouve sur le net