Tweet
Bonjour à tous,
J'aurais grandement besoin de votre aide, je suis en train de créer un site internet qui contient 2 div (une sur la gauche et une sur la droite) qui servent d'image de fond.
J'aimerais que ces 2 div soient redimensionnable suivant la taille de l'écran.
Pour cela j'ai donc créé un Javascript. Voila ma fonction :
function resizeimg()
{
document.getElementById("fond-gauche").style.width = (document.width-1000)/2;
document.getElementById("fond-droite").style.width = (document.width-1000)/2;
}
Je l'ai testé tout simplement dans un html et celle-ci fonctionne. Voila le test que j'ai fais :
<html>
<head>
</head>
<body style="width:100%" onresize="resizeimg()">
<div id="image" style="background-color:#FF00FF; background-image:url(img.jpg); width:300px; height:300px;">
</div>
</body>
<script language="javascript">
function resizeimg()
{
document.getElementById("image").style.width = (document.width-1000)/2;
}
</script>
</html>
Mais lorsque je met la fonction en relation avec le code de mon site je n'arrive pas à la faire fonctionner.
Pouvez-vous m'aider à trouver d'ou vient mon erreur. Je pense que je n'appelle pas la fonction au bon moment.
Merci d'avance.
PS : Tout ce que j'ai mis en rouge à un rapport avec ma fonction pour que ce soit plus visible.
Mon code php :
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script>
<?php
$centreclass = 'large';
if ($this->countModules('position-6')) :
$centreclass = 'normal';
endif;
?>
</head>
<body style="width:100%" onresize="resizeimg()">
<div id="fond-gauche" style= "width:275px; height:1000px;" ></div>
<div id="fond-droite" style= "width:275px; height:1000px;"></div>
...
J'aurais grandement besoin de votre aide, je suis en train de créer un site internet qui contient 2 div (une sur la gauche et une sur la droite) qui servent d'image de fond.
J'aimerais que ces 2 div soient redimensionnable suivant la taille de l'écran.
Pour cela j'ai donc créé un Javascript. Voila ma fonction :
function resizeimg()
{
document.getElementById("fond-gauche").style.width = (document.width-1000)/2;
document.getElementById("fond-droite").style.width = (document.width-1000)/2;
}
Je l'ai testé tout simplement dans un html et celle-ci fonctionne. Voila le test que j'ai fais :
<html>
<head>
</head>
<body style="width:100%" onresize="resizeimg()">
<div id="image" style="background-color:#FF00FF; background-image:url(img.jpg); width:300px; height:300px;">
</div>
</body>
<script language="javascript">
function resizeimg()
{
document.getElementById("image").style.width = (document.width-1000)/2;
}
</script>
</html>
Mais lorsque je met la fonction en relation avec le code de mon site je n'arrive pas à la faire fonctionner.
Pouvez-vous m'aider à trouver d'ou vient mon erreur. Je pense que je n'appelle pas la fonction au bon moment.
Merci d'avance.
PS : Tout ce que j'ai mis en rouge à un rapport avec ma fonction pour que ce soit plus visible.
Mon code php :
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script>
<?php
$centreclass = 'large';
if ($this->countModules('position-6')) :
$centreclass = 'normal';
endif;
?>
</head>
<body style="width:100%" onresize="resizeimg()">
<div id="fond-gauche" style= "width:275px; height:1000px;" ></div>
<div id="fond-droite" style= "width:275px; height:1000px;"></div>
...
