11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changer background-image de la balise HTML via bouton image

Pages :
Bonjour,

J'aimerais donner l'opportunité aux visiteurs d'un site Internet de pouvoir personnaliser l'image de fond dont la propriété CSS a été définie au niveau de la balise <html>.
L'utilisateur aurait ainsi la possibilité de cliquer sur des vignettes (balises <img>) représentant l'arrière-plan en question.
Connaitriez-vous une solution JavaScript à ce problème sans passer par des bibliothèques JQuery ou autres ?

Au plaisir de vous lire.
Hello

Tout d'abord ton image de fond s'appliquera sur la balise body et non la balise html.

Ensuite :
- créer différentes classes css avec tes différents fonds
- créer un évènement JS de type onclick sur tes images cliquables, qui va appeler une fonction qui va supprimer la classe de fond existante puis ajouter la classe correspondante au fond choisi.

Je ne vois pas comment faire ça sans passer par JS...
Bonjour Pedrothelion et aliasdmc,

Merci d'avoir répondu à ce sujet. Je reviens vers vous avec un peu de retard car avais contracté un virus (bio).

Tout d'abord, j'ai suivi le conseil de Pedrothelion et ai placé le "background" au niveau de la balise <body> plutot que la balise <html>. Problème : l'arrière-plan ne recouvre plus la totalité de la page via la propriété css "background-size:cover". Aussi je me demande comment remédier à cela de même que je souhaiterais comprendre pourquoi on ne peut pas gérer l'arrière plan au niveau de la balise <html>.

J'ai ensuite étudié l'exemple d'aliasdmc et j'avoue na pas bien cerner comment cela fonctionne. Je n'ai pas su reproduire la solution de par le fait que je débute en JavaScript.
Aussi ai-je écrit un micro-site Internet afin de mieux cerner la problématique. Il vous est accessible à cette adresse :
http://www.mediafire.com/file/ushfsh24pm4j0hx/test.zip/file
C'est un fichier *.zip de 5Mo, téléchargeable.

- Sur la page "index.html", vous constaterez que l'arrière plan ne couvre plus entièrement la page.
- Sur la page "settings.html", il y a 4 images représentant 4 alternatives d'arrière-plan (le premire arrière-plan étant celui par défaut). Le but est bien de changer d'arrière plan en cliquant sur l'une des 4 images.

Encore merci pour votre aide.
Modifié par Raf-Web (27 Mar 2019 - 12:45)
Bonsoir aliasdmc,

Merci beaucoup pour ces exemples ciblés ! Ca semble fonctionner. Je vais étudier le code de plus près et pourquoi pas, faire quelques adaptations.

J'édite mon message car il semble y avoir un souci : si l'on copie le site sous un autre nom et qu'on lance pour la première fois index.html, l'image de fond (backfround-image) paramétrés au niveau de la balise <html> via la feuille de style CSS ne s'applique pas. En bref, aucun arrière-plan n'est visible à la première visite du site, il faut que le visiteur aille en choisir une de lui-même.
Ne manquerait-il pas une instruction ?
Modifié par Raf-Web (28 Mar 2019 - 18:47)
Bonjour aliasdmc,

C'est totalement délirant :
Dans la dernière instruction javaScript, avec l'URL distante ("https://...") de ton propre script, on obtient bien une image d'arrière-plan par défaut au chargement de la page HTML. Par contre, si je la remplace par une URL locale ("../images/background-1.jpg"), l'arrière plan ne s'affiche plus...

Test mis en ligne ici: https://image-nature.net/test/
Modifié par Raf-Web (01 Apr 2019 - 18:30)
Dans la dernière instruction javaScript, avec l'URL distante ("https://...") de ton propre script, on obtient bien une image d'arrière-plan par défaut au chargement de la page HTML. Par contre, si je la remplace par une URL locale ("../images/background-1.jpg"), l'arrière plan ne s'affiche plus...

[Edition : URL test supprimée]
Modifié par Raf-Web (03 Apr 2019 - 17:27)
Bonjour Pedrothelion,

Merci pour ton example. Il est étonnant de voir à quel point le code est beaucoup plus court que celui proposé par aliasdmc. Néanmoins, je ne comprends pas pourquoi tu gères l'arrière-plan au niveau de la balise <body> plutôt que <html>.
La solution d'aliasdmc fonctionne au niveau de la balise <html>. Le seul souci avec son code (option 2) se situe au niveau de la dernière instruction JavaScript :
loadSkin("https://www.geo.fr/var/geo/storage/images/dossier-geo/les-plus-belles-photos-de-la-communaute-la-provence/lavandes-du-plateau-de-valensole/1415798-1-fre-FR/lavandes-du-plateau-de-valensole-0.jpg");

Si je remplace l'URL "distante" ci-dessus par l'URL "locale" ci-dessous, l'arrière plan par défaut ne se charge pas à la première ouverture du site (il est nécessaire de purger les cookies entre 2 essais pour s'en rendre compte).
loadSkin("../images/background-1.jpg");

C'est assez déroutant comme résultat...

Je garde cependant ton code sous le coude en tant qu'alternative Smiley cligne
Bonjour JENCAL,

Merci pour cette précision. Il semblerait que oui en effet.


Autre point bloquant : Le Script fonctionne bien en ligne avec Edge / Internet Explorer / FireFox.
En Intranet, il fonctionne toujours avec FireFox mais plus avec Edge ni Internet Explorer ; ces 2 derniers étant les seuls navigateurs déployés dans notre entreprise. C'est problématique car le site est censé fonctionner au sein de notre réseau d'entreprise uniquement, ce que j'appelle l'Intranet...
il faut vérifier les versions des navigateurs. et adapté le code en conséquence. Mais... pour Edge, bon courage. moi je l'ignore totalement dans mes dev
Conclusion :

On peut finalement dire que les solutions évoquées ici fonctionnent bien en ligne, tous navigateurs confondus.

Si l'on souhaite exécuter le code en local, il faudra néanmoins héberger en ligne l'arrière-plan par défaut car le code JavaScript pointe sur une URL Internet et n'accepte pas les URL relatives.

Toujours en local, le code JavaScript ne fonctionne plus avec les version actuelles d'Edge et Internet Explorer.

Merci à chacun pour votre aide !
Modifié par Raf-Web (03 Apr 2019 - 17:28)
Si l'on reste conventionnel, la balise html sert à déclarer l'ouverture d'un document html.
La balise body, elle, sert à déclarer l'ouverture du corps de ta page, donc de ton contenu, il est donc plus logique de mettre le background sur ta balise body. Cela fonctionne sur la balise html également comme tu le signifies, mais c'est pour rester dans une certaine logique.

C'est comme si je te disais qu'il serait plus pratique de manger assis sur ta chaise et sur une table, plutôt que par terre au milieu de ton salon et sans couverts, tu peux manger aussi, mais c'est plus chiant Smiley cligne

La solution que je te propose fonctionne sur tous les navigateurs, en appelant évidemment jquery dans ton header.
Modifié par Pedrothelion (04 Apr 2019 - 10:49)
Apparemment si on définit un background sur la balise body et rien sur l'élément html, le background sera de toute façon considéré comme appliqué à l'élément html.

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
https://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body

Essayez d'enlever le background sur l'élément html de ce pen :
https://codepen.io/chriscoyier/pen/AgGKa

J'ai toujours vu l'élément html comme un peu à part aussi mais je ne pense pas qu'il y est de contre indication à le styliser. C'est plus une question d'habitude.
Il n'y a pas de contre indication, mais comme je te dis c'est plus conventionnel, je ne pense pas qu'il faille t'obstiner avec ça... je te conseille de le mettre sur le body, après tu fais comme tu le sens.
1 - C'est ma première intervention sur ce sujet donc je ne crois pas être l'obstiné.
2 - Cela produit exactement le même résultat sauf si on applique un background et sur le body et sur le html. D'où mon intervention.
3 - Il n'y a aucune convention dans ce sens donc chacun fait comme bon lui semble.

Smiley cligne
Modérateur
J'irais même jusqu'à dire qu'à cause de ce comportement peu intuitif, mettre le background sur <html> semble plus approprié. Smiley smile
Pages :
Sujet clos
Aller à