Image arrière plan dynamique

Archive du forum. Comment changer dynamiquement les images de fond de page.

Forum

Image arrière plan dynamique

15-11-2011 12:14:37

Alan49

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.

15-11-2011 20:32:48

webmaster

Bonjour Le principe de bascule a été utilisé sur le site dans plusieurs scripts. Dans AEP: Ajax Extensible. (voir démos). Si je lis bien le script ci-dessus, la fonction changeImage permet déjà d'alterner entre l'image jour et l'image nuit. Il suffit de remplacer changeBackground par changeImage dans la partie HTML.

16-11-2011 01:38:07

Alan49

Merci du lien. Mais lorsque je modifie 'changeBackground' par 'changeImage', il ne se passe plus rien. Il faudrait pour cela que je charge l'image de fond avec le programme JavaScript puis que j'introduise l'algorithme ; si c'est nuit tu remplace par jour et si c'est jour tu remplace par nuit... C'est deux IF imbriqués cela. Exemple :

if (v == "./Images/Nuit.jpg")
{
v = "./Images/Jour.jpg"; 
return; }
if (v == "./Images/Jour.jpg";)
{
v = "./Images/Nuit.jpg"; 
return; }

Switcher l'image de fond en JavaScript n'est pas aisé surtout lorsque, comme moi, l'on programme tout avec le soft Notepad++

16-11-2011 19:42:50

webmaster

Cela fonctionne parfaitement dans cette démonstration: Images dynamiques. Peut-être un problème avec le chemin dans la src? On peut tester uniquement la présence d'un mot dans l'URL:

function changeImage(element)
{
  var v = x.getAttribute("src");
  if(v.indexOf("Nuit") != -1)
    v = "./Images/Jour.jpg");
  else
    v = "./Images/Nuit.jpg");
  x.setAttribute("src", v);    
}

Dans le code que vous avez inclus, en fait, element n'est pas associé à la balise image. On peut supprimer l'argument element et retrouver la valeur de l'attribut background de body directement.

var x = document.body.style.background;

(De mémoire, je n'ai pas essayé). Notez qu'il existe des éditeurs plus perfectionnés comme NetBeans, PsPad, etc...

17-11-2011 00:33:22

Alan49

Merci de votre temps. Dans la la programmation du début, comme dans votre lien exemple, je passe bien d'un état 'Nuit' à un état 'Jour'. Et comme dans votre lien exemple, je ne peut revenir à l'état antérieur (Nuit) ... Si j'ai tout suivis, tout ce base sur le mot de l'URL, Jour / Nuit. Mais à la base, je dois bien implémenter le mot Nuit dans le code JavaScript et l'identifier dans une variable afin de modifier cet état par la suite. Exemple d'algorithme : A = Nuit Fond d'écran = A Si A == Nuit le remplacer par Jour Donc A = Jour Else Si A == Jour le remplacer par Nuit Donc A = Nuit OnClick : Fond d'écran = A Ensuite, plus qu'a faire une boucle après 'Fond d'écran = A' et 'OnClick' pour que cela marche comme un bouton switch. Qu'en pensez-vous ?

17-11-2011 10:27:53

webmaster

Une démonstration complète sur le site, que j'ai ajoutée pour vérifier le code plus haut: Images démos. La fonction JavaScript changeImage est en fait comme ceci:

function changeImage()
{
  var v = document.body.background;
  if(v.indexOf("asin1") != -1)
    v = "https://www.xul.fr/images/asin2.jpg";
  else
    v = "https://www.xul.fr/images/asin1.jpg";

  var z = new Image();
  z.src = v;
  document.body.background = z.src;  
}

Remplacer les URL par les valeurs de votre choix.

17-11-2011 18:19:21

Alan49

OUI, merci, c'est bien cela :) Voici le code au final...

HTML :
--------------------------------------------
<html>
<head>
	<title>Bouton On Off</title>
	<link rel="icon" type="image/png" href="./Images/Avatar.png"></link>
	<script type="text/javascript" src="./Javascript/bouton.js"></script>
</head>

<body>
<input type="button" style="width:50px; height:50px" value="On Off" onclick="changeImage()">
</body>
</html>
--------------------------------------------

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;
---------------------------------------------

Maintenant que je le vois, c'est tout simple... Je repart avec le JavaScript et now j'apprends le CSS. Problème résolu !