11548 sujets

JavaScript, DOM et API Web HTML5

Image arrière plan dynamique

Bonjour,

Pour le moment, j'ai un bouton marche qui permet de changer le fond de page d'une image nuit en image jour.

Mon but, est d'avoir un bouton marche arret pour varier de jour à nuit et inversement.

Voici la partie HTML :
-------------------------------------
<body background="./Images/Nuit.jpg">
<form method="post" action="">
<input type="button" name="submit" value="Changer l'image de fond" onclick="changeBackground();">
</form>
--------------------------------------

Voici la partie JavaScript :
--------------------------------------
function localFilename(url)
{
var x = url.lastIndexOf("/");
url = url.slice(x + 1);
return url;
}


function changeImage(element)
{
var v = element.getAttribute("src");
v = localFilename(v);

if(v == "./Images/Nuit.jpg")
v = "./Images/Jour.jpg";
else
v = "./Images/Nuit.jpg";

element.setAttribute("src", v);

}

function changeBackground()
{
var z = new Image();
z.src = "./Images/Jour.jpg";
document.body.background=z.src;
}
--------------------------------------

Auriez vous une solution afin de mettre en place ce bouton switch ?

Merci de votre aide.
Hello.

Le plus simple, plutôt que de changer le background via JS, serait de créer une classe nuit dans ta css (les styles de jour étant ceux par défaut), et d'ajouter/supprimer celle-ci via JS.
Merci de ta réponse, mais ne connaissant pas très bien le CSS, je dois avouer que ne vois pas comment faire en CSS, en JavaScript je verrai bien un switch entre les deux images pour le background... Smiley ohwell
Ce qui me pose problème, c'est la liaison entre le bouton marche arrêt et l'image de fond.
Modifié par Alan49 (15 Nov 2011 - 15:43)
Alan49 a écrit :
Merci de ta réponse, mais ne connaissant pas très bien le CSS, je dois avouer que ne vois pas comment faire en CSS

C'est pas hyper compliqué. Schématiquement, par exemple:
body.jour {
  background-image: url(body-jour.png);
}
body.nuit {
  background-image: url(body-nuit.png);
}
#header.jour {
  background-image: url(header-jour.png);
}
#header.nuit {
  background-image: url(header-nuit.png);
}

Le code JavaScript va se contenter de modifier la classe sur l'élément BODY, et tu gères le reste en CSS. Et si tu ne connais pas du tout CSS (parce que là il ne s'agit pas de bien connaitre ce langage, mais juste d'avoir les bases Smiley cligne ) bah tu peux toujours apprendre.

On ne va pas t'aider à planter des clous avec une pierre juste parce que tu n'es pas très à l'aise avec un marteau. Smiley smile
Modifié par fvsch (16 Nov 2011 - 16:07)
Merci de vos réponses, il est vrais que cela a l'air simple avec le CSS...

Cela fait 4 ans que je n'ai plus programmer en JavaScript et Java, de plus le CSS a cette époque, je ne connaissais pas !

Donc question, comment faire l'interaction de ce code CSS avec le code en JavaScript ?
Faut-il importer le programme CSS comme le programme JavaScript dans le code HTML ?

Smiley confus
Hello à tous,

En fait, je suis passer par JavaScript ...
----------------------------------
function changeImage()
{
var v = document.body.background;
if(v.indexOf("Nuit") != -1)
v = "./Images/Jour.jpg";
else
v = "./Images/Nuit.jpg";

var z = new Image();
z.src = v;
document.body.background = z.src;
}
function setImage()
{
var z = new Image();
z.src = "./Images/Nuit.jpg";
document.body.background = z.src;
}
window.onload=setImage;
------------------------------------

Avec un petit bouton dans la partie Body de mon HTML.
-------------------------------------
<input type="button" style="width:50px; height:50px" value="On Off" onclick="changeImage()">
--------------------------------------

Et le tour est joué Smiley biggrin
Merci et problème résolu.
Tu es au courant qu'un simple document.body.className = 'nuit' te permet de changer la classe de ton élément body?
Ce serait pas juste dix fois plus simple de faire comme ça?
Sujet clos
Aller à