Sujet Précédent Sujet Suivant

Help! Changer IMAGE header selon resolution

Fermé
jessicatte Messages postés 5 Date d'inscription lundi 30 novembre 2009 Statut Membre Dernière intervention 10 décembre 2009 - 30 nov. 2009 à 16:49
Flachy Joe Messages postés 2103 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 21 novembre 2023 - 1 déc. 2009 à 23:25
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
A voir également:

4 réponses

Réponse 1 / 4
Flachy Joe Messages postés 2103 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 21 novembre 2023 260
30 nov. 2009 à 20:03
Salut,
Perso je ferais ça : 
<script type="text/javascript" >
  document.body.style.backgroundImage = "url(la/ou/est/limage.jpg)";
</script>
0
Réponse 2 / 4
jessicatte Messages postés 5 Date d'inscription lundi 30 novembre 2009 Statut Membre Dernière intervention 10 décembre 2009
30 nov. 2009 à 23:49
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
0
Réponse 3 / 4
Flachy Joe Messages postés 2103 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 21 novembre 2023 260
1 déc. 2009 à 20:16
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 

<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>
0
Réponse 4 / 4
jessicatte Messages postés 5 Date d'inscription lundi 30 novembre 2009 Statut Membre Dernière intervention 10 décembre 2009
1 déc. 2009 à 22:18
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
0
Flachy Joe Messages postés 2103 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 21 novembre 2023 260
1 déc. 2009 à 23:25
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 
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
0

Discussions similaires

debloquer le code 400 bad request qui s'affiche à google
fath -
DelNC -

1 réponse
Mettre Facebook Messenger en français
bleumarine2009 -
lauredine61 -

1 réponse